Cómo emplear fuentes exóticas en una página web

Una de las mayores frustraciones que he tenido al desarrollar páginas web sobre diseños estilizados es tener que usar una fuente estándar en vez de usar la fuente del diseño original. Sería ilógico esperar que todos los computadores del mundo tuvieran la fuente específica que el diseñador empleó en la creación de los botones de algún menú, así que por lo general todo termina en la mala práctica de crear imágenes que hagan las veces de botones, algo no deseable si queremos que nuestro sitio suba rápido en los mecanismos de indexación (lo sé, hay técnicas de buenas prácticas que subsanan este problema). Y para complicar más las cosas, toda modificación futura del sitio dependerá de la disponibilidad del diseñador para hacer los nuevos botones. Al final todo se convierte en una disputa entre lo ideal, lo óptimo y lo necesario.

En vista de esta situación, el estandar CSS implementa entre sus reglas una técnica que declara una nueva font-family para ser renderizada en una página aunque la fuente no esté instalada en el computador desde el que se ejecuta el navegador.

El primer paso para implementar esta técnica es disponer del archivo de la fuente y verificar si el tipo de licenciamiento permite emplearla en el desarrollo. Internet está lleno de recursos para buscar tipografías, y en delicious tengo una etiqueta dedicada a estos recursos que tal vez podría servir como introducción al proceso de búsqueda de la fuente y sus términos de uso.

Ya con la fuente en nuestro poder, y con la certeza de que el licenciamiento permitirá su uso, el paso siguiente es convertirla en las distintas versiones alternativas que maximizarán la posibilidad de ser renderizada en todos los navegadores. Por lo general las fuentes que se descargan de Internet vienen en formato OpenType (OTF) o TrueType (TTF), pero algunos navegadores solo pueden leer fuentes de tipo SVG, o un formato propio particular (Internet Explorer solo entiende el formato EOF propio de Microsoft). Por fortuna convertir entre formatos de fuentes es muy sencillo gracias a herramientas en línea como el Generador de kits @font-face de FontSquirrel. Esta pequeña y gratuita aplicación web permite cargar una fuente devidamente licenciada, y en respuesta obtener un directorio comprimido con la misma fuente en diferentes formatos, mas un ejemplo HTML/CSS que demuestra cómo usar la nueva font-family en una página.

La regla css que declara la nueva familia de fuentes contiene los siguientes elementos

@font-face {
   font-family: 'Lobster14Regular';
   src: url('lobster_1.4-webfont.eot');
   src: local('☺'), url('lobster_1.4-webfont.woff') format('woff'),
      url('lobster_1.4-webfont.ttf') format('truetype'),
      url('lobster_1.4-webfont.svg#webfontDAiS7u4e') format('svg');
   font-weight: normal;
   font-style: normal;
}

La línea font-family declara el nombre de la nueva familia, y la regla src declara cuál archivo usar con cada formato. Nótese que hay dos reglas src, una para el formato propio de Microsoft y otra para los formatos restantes. Las demás reglas indican el estilo y el peso de la fuente base de la familia. Por defecto los navegadores emplearán únicamente el primer archivo de la lista que esté en un formato que puedan manipular, optimizando el ancho de banda.

Para la muestra un botón.

<div class="lobster">Ejemplo de texto empleando la fuente Lobster.</div>

Para emplear la fuente en la página solo hace falta declarar la regla font-family en la etiqueta correspondiente. El anterior párrafo fue declarado con clase lobster, y la regla que lo describe es la siguiente.

div.lobster {
   font-family: 'Lobster14Regular';
}

Por cuestión de licenciamiento es recomendable agregar un comentario en el archivo CSS con los datos de la fuente. En este caso particular agregué el mismo texto del archivo léame que viene con la fuente Lobster.

Nota posterior: otra forma para agregar una familia de fuentes a un documento HTML puede ser empleando la Google Font API. Si la fuente que desea emplear está dentro de la lista de familias de fuentes disponibles solo será necesario agregar la siguiente declaración en el encabezado del documento.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= Reenie+Beanie|Tangerine|Lobster|Just+Me+Again+Down+Here">

La variable family del anterior llamado podrá contener las familias de fuentes disponibles en la lista, cambiando los espacios por «+» y separándolas con el signo «|».