2011
24
02

¿Podemos cargar cualquier tipo de letra en una web?

por: Moises Calviño

La respuesta es Si, no es necesario que el usuario tenga instalado el tipo de letra ni que la web esté programada en Flash. A continuación os describimos las instrucciones para realizarlo:

  1. Ir a una web que convierte nuestro tipo de letra a un formato que se puede usar en web.
  2. http://www.fontsquirrel.com/fontface/generator Esta pagina te genera el código css y las fuentes en un archivo . rar que te descarga. Hay que hacerlo una vez por cada estilo de la letra que queramos usar, por ejemplo, si usamos fuente normal y negrita generaremos el CSS 2 veces, una para la letra en negrita y otra para la normal. Vamos a ver un ejemplo para el tipo de letra Myriad Pro Ejemplo del css para la letra normal, el Font-weight: normal; lo define @font-face { font-family: 'MyriadPro'; src: url('myriadpro-semibold-webfont.eot?') format('eot'), url('myriadpro-semibold-webfont.woff') format('woff'), url('myriadpro-semibold-webfont.ttf') format('truetype'), url('myriadpro-semibold-webfont.svg#webfontJdGIerQQ') format('svg'); font-weight: normal; font-style: normal; } Ejemplo del css para la letra negrita, el Font-weight: bold; lo define @font-face { font-family: 'MyriadPro'; src: url('myriadpro-bold-webfont.eot?') format('eot'), url('myriadpro-bold-webfont.woff') format('woff'), url('myriadpro-bold-webfont.ttf') format('truetype'), url('myriadpro-bold-webfont.svg#webfontYhHcrIrT') format('svg'); font-weight: bold; font-style: normal; }  
  3. Luego cargamos la letra en nuestra web de forma normal
  4. font-family:"MyriadPro",Arial;
NOTA: en los 2 @font-face el Font-family: tiene que tener el mismo nombre, si no es así falla y lo ve como fuentes distintas, copiamos todo en nuestro css y listo. Moisés Calviño

tags:


2 Respuestas a “¿Podemos cargar cualquier tipo de letra en una web?”

  1. Cómo agregar distintos tipos de letra a mi web. - e-SORT Blog Diseño Web dice:

    […] un post antenrior explicamos como ¿Podemos cargar cualquier tipo de letra en una web?, pero era necesario tener la fuente original y el permiso necesario para poder […]

  2. Cargar cualquier tipo de letra en una web que no es Flash dice:

    […] Cargar cualquier tipo de letra en una web que no es Flash http://www.e-sort.net/blog/?p=1090  por e-sort hace 4 segundos […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  Acepto la política de privacidad

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.