Usa cualquier fuente o tipografía en HTML con CSS3 y font-face

@font-face es un atributo de CSS3 bastante oscuro que permite usar cualquier fuente en tus diseños. Lo mejor: funciona en Internet Explorer 6, por ende en todos los navegadores. Y nadie lo usa.

Implementarlo no es dificil. Y con este artículo eliminarás la necesidad de cosas odiosas como fuentes en imágenes PNG, SiFR o Cufón (sí, cufón es malisimo).

Podrás diseñar todo lo que quieras para la web sin restricciones tipográficas.

Fuentes @font-face: ttf, woff, eot, svg

Todos conocen True Type (.ttf) y en menor medida Open Type (.otf), pero pocos conocen la amplia cantidad de formatos que existen en la web actual y esa es la principal razón para que nadie implemente (bien) @font-face.

TTF es muy estándar pero no tiene protección ninguna. Es un formato abierto y reusable, por lo que fuentes privadas o propietarias (como Helvetica o Myriad Pro) al ponerlas en la web, son distribuidas. Esto está prohibido por la licencia del creador de la fuente (historia larga) y para ello, varios navegadores crearon estas opciones:

EOT: El formato Embedded Open Type (.eot) fue creado por Microsoft como pionero en Internet Explorer 6 para agregar fuentes a través de font-face. Es bastante oscuro pero es la única forma de hacer que las fuentes funcionen en IE6, 7 y 8.

WOFF: Web Open Font Format es el formato oficial de la W3C, creado por Mozilla y ahora apoyado por Chrome, Opera e IE9 y 10. También oscuro, pero también necesario.

SVG: Scalable Vector Graphics es un formato de dibujo vectorial soportado por todos los navegadores y por herramientas como Adobe Illustrator. SVG también puede contener fuentes por dentro, porque una fuente a fin de cuentas es un vector. SVG es obligatorio para darle soporte a Safari Mobile (iPhone, iPad).

Implementación de @font-face en CSS3 compatible con TODOS los navegadores

Para implementar una fuente en @font-face para todos los navegadores de escritorio o móviles, hay que convertirla a todos los formatos anteriores. Pero usando herramientas como FontSquirrel @font-face generator.

La sintaxis de font-face es muy sencilla. Sólo colocas esto en las primeras lineas de tu CSS:

Código :

@font-face
{
   font-family: "Cristalab";
   src: url("fuentefancy.eot");
   src: url("fuentefancy.eot?#amocristalab") format("embedded-opentype"),
        url("fuentefancy.woff") format("woff"),
        url("fuentefancy.ttf") format("truetype"),
        url("fuentefancy.svg#IDdelafuente") format("svg");
}

Luego, simplemente usas la fuente con el nombre arbitrario que le diste. Por ejemplo, si quieres cambiar la fuente de todos los h1, sólo haces

Código :

h1
{
   font-family: "Cristalab";
}

Así de fácil.

Google Fonts API

Google tiene una base de datos bastante interesante de tipografías abiertas donde, con una linea de código, ellos se encargan del CSS, detectan el navegador y envían, desde sus servidores, la fuente correcta. Es una forma fácil y sin dolor de implementar font-face, aunque estás limitado a las fuentes de Google.

En Cristalab tenemos dos artículos detallados en el uso de Google Fonts:
Usa cualquier fuente en CSS y HTML con el Font API de Google
Google Fonts v2: Usa cualquier tipografía en HTML, mejorado

Dos grandes ejemplos de @font-face ya implementados

Curiosamente, fue Microsoft, en el lanzamiento de Internet Explorer 9, quien hizo un sitio llamado Lost Worlds Fair, donde muestra dos muy impactantes ejemplos de uso de fuentes. El primero es Moon (visto en la primera imagen de este artículo) y otro bastante poderoso es El Dorado.



Muchas fuentes gratuitas al 100% pueden ser encontradas en Fontsquirrel @font-face kits o en Google Web Fonts. O puedes convertir la que quieras mientras tengas la licencia.

Ahora ya puedes crear diseños con cualquier tipografía. Hora de abandonar Arial, Times y Helvetica.

Lee los comentarios para dejar preguntas y quizás ya respondieron tu pregunta.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.