Fuentes personalizadas en la web con @font-face
Una de las grandes ventajas de los nuevos navegadores, es el uso de @font-face para la inserción de tipografías personalizadas para la web. Es una gran noticia el que podamos elegir cualquier fuente teóricamente a integrar dentro de nuestras páginas web y aplicaciones en internet.
Por supuesto, soluciones como sIFR y Cufón han existido desde hace bastante tiempo, pero tienen sus desventajas (los dos son mejor usarlos sólo en los títulos, y Cufón no permite copiar y pegar su contenido). Si realmente quiere incrustar fuentes en sus páginas web, creo que @font-face es la solución más adecuada.
¿Por qué es importante incrustar las fuentes?
A la hora de maquetar una página, dependemos de las fuentes que tenga instaladas en su ordenador la persona que la esté visualizando. Éstas fuentes suelen ser genéricas, y muchas veces no se corresponden con la imagen que se desea dar desde la web.
Hasta no hace mucho, la única forma de poder ver un texto con una tipografía determinada se hacía por medio de imágenes; esto ralentizaba la carga de la página debido al peso de estas imágenes.
Formatos de fuentes
Hoy en día la mayor parte de los navegadores soportan la incrustación de fuentes. Todos ellos soportan el uso de fuentes TrueType (. Ttf) y OpenType (. Otf) … excepto Internet Explorer que sólo admite el formato Embedded Open Type (. EOT).
No hay muchas fuentes disponibles en este último formato, y la herramienta de Microsoft que convierte de TTF a EOT, llamada urdimbre, tiene un uso complicado y frustrante. Hay sin embargo una aplicación online que permite realizar este paso de una forma más sencilla, ttf2eot. Si desea convertir una fuente OpenType a Embedded Open Type, es necesario utilizar FontForge, una herramienta gratuita de edición, para convertir la fuente de TrueType, y luego usar ttf2eot para convertir la fuente resultante al formato EOT.
Dónde obtener fuentes que puedas usar en la web
Aunque ahora es técnicamente posible integrar casi cualquier tipografía dentro de la página, es importante recordar que si se utiliza una fuente comercial para este propósito, se debe tener licencia para hacerlo. Es por esta razón que gran parte de los navegadores no permitían incrustar las fuentes.
Afortunadamente, hay algunos sitios que han recopilado decenas de fuentes para usar de forma libre y gratuita:
- Font Squirrell, que incluyen kits con la fuente EOT, así como un archivo OTF o la fuente TTF. Cada kit también incluye la hoja de estilos y el archivo html.
- Smashing Magazine’s tiene un excelente artículo, 40+ Excellent Freefonts For Professional Design
- Kernest.com alberga una gran cantidad de fuentes que se pueden utilizar para la incrustación.
- Webfonts.info tiene una página dedicada a la incrustación de fuentes.
¿Cómo insertar la fuente en la página?
Una vez que tienes la fuente que deseas insertar, primero se declara dentro de la hoja de estilos:
@font-face {
font-family: 'Droid Sans';
/* for IE */
src: url('/shared/fonts/DroidSans/DroidSans.eot');
/*
* for non-IE: first see if the font exists locally on the browser's
* computer. If so, use that copy of the font. Otherwise, load it
* from the server
*/
src: local('Droid Sans'),
url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}
Después se incluye la fuente dentro de cualquiera de los selectores del CSS, de la misma forma que se haría con cualquier otra fuente.
body {
font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}
Hay que tener en cuenta que aún se deberían añadir fuentes alternativas, para navegadores que no soporten @font-face.
Conclusión
Aún queda mucho por mejorar en este aspecto, que @font-face acabe siendo un estándar y que todos los navegadores lo soporte correctamente y de la misma forma. Pero ésta es una solución bastante aceptable que puede solucionarnos muchos quebraderos de cabeza.
