¿Podemos cargar cualquier tipo de letra en una web?

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.

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;

}

 

2. Luego cargamos la letra en nuestra web de forma normal

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: CSS, Desarrollo web, Diseño web, tipo de letra web

---

Esta entrada fue publicada el 24 de febrero de 2011 en 12:19 pm y está archivado en Desarrollo web, General, HTML / CSS. Puedes seguir las respuestas a esta entrada a través de nuestro RSS 2.0. Puedes dejar una respuesta, o trackback desde tu propio sitio web.