Uso de tipos de letra externos en un sitio web web

Hasta la llegada de las especificaciones CSS3 a nuestros navegadores el uso de tipografías en los sitios web estaba limitada a las genéricas: "serif", "sans-serif", "cursive", "fantasy" y "monospace". También se podían usar las fuentes instaladas en el ordenador como "Arial", "Times New Roman", "Courier New" o "Comic Sans", pero con el problema de que los tipos de letra de Microsoft sólo funcionarían en PCs con Windows, los tipos de letra de Apple sólo funcionarían en sistemas Macintosh, etc. En aquella época los diseñadores web tenían que incluir largas ristras de compatibilidad en sus declaraciones de tipo de letra. Por ejemplo:

h1 {
    font-family: "Arial", "Helvetica", sans-serif;
}

Por suerte CSS3 definió la regla @font-face que permite añadir tipografías externas a nuestros sitios web. Hoy en día la mayoría de los navegadores (Firefox, Opera, Chrome, Safari, etc.) aceptan fuentes en dos formatos:

• TrueType Font: Archivos con extensión .ttf
• OpenType Font: Archivos con extensión .otf

Por desgracia y como suele ser habitual Microsoft siguió su propio camino sin tener en cuenta a los demás y su Internet Explorer 9 sólo acepta tipos de letra en formato:

• Embedded OpenType: Archivos con extensión .eot

Además Internet Explorer 8 y anteriores no soportan la regla @font-face. Con lo cual los diseñadores siguen teniendo que poner lasgas ristras de compatibilidad en la declaración de la fuente a usar.

Uso de la regla @font-face

La regla @font-face permite definir un tipo de letra externo a usar en nuestro sitio web. En este ejemplo supondremos que los archivos ttf y eot se encuentran en una carpeta llamada fonts.

@font-face
{
    font-family: MiFuente;
    src: url('fonts/MiFuente.ttf'),
         url('fonts/MiFuente.eot'); /* IE9 */
}

h1 {
    font-family: MiFuente, serif;
}

Podemos definir tantas @font-face como necesitemos, de forma que podemos usar por ejemplo un tipo de letra para el título principal, otro para los títulos secundarios y otro para el texto.

Conversión de formatos

Ya hemos comentado que IE9 soporta únicamente el formato EOT, mientras que los demás navegadores aceptan TTF y OTF pero no EOT. Eso nos obligará disponer de antemano de los archivos de definición de fuente en varios formatos o bien convertir unos formatos en otros. Existen varias herramientas para realizar estas conversiones, aunque no siempre funcionan. Pongo aquí las más comunes:

• TTF to EOT Font Converter: Sencillo conversor on-line (con limitaciones) [EN]
• ttf2eot: Otro sencillo conversor on-line de TTF a EOT [EN]
• FreeFontConverter: Completo multiconversor de formatos on-line [EN]
• FontSquirrel.com: Diversas herramientas para tratamiento de tipografías [EN]
• Web Embedding Fonts Tool (WEFT): Herramienta oficial de Microsoft [EN]
• ttf2eot Herramienta para Linux con licencia GNU GPL v2 [EN]

Licencias, derechos y copyright

El uso de archivos de tipografías suele estar sujeto a licencias. Así podemos encontrarnos fuentes libres, fuentes libres con limitaciones, fuentes libres para proyectos personales pero no para comerciales, fuentes de pago, etc. Antes de usar cualquier tipo de tipo de letra en un sitio web debería comprobarse primero la licencia que tiene. En muchos casos será necesario contactar con el autor y pedir permiso para usar ese tipo de letra.

En Internet podemos encontrar sitios con multitud de tipografías. Uno muy interesante es Google Web Fonts [EN] que proporciona una colección de tipografías libres de derechos para usar en proyectos web de forma gratuita. Otro sitio muy útil es FontSquirrel.com, que proporciona listas de tipografías libres y algunas herramientas para el tratamiento de tipos de letra en la web. También tenemos sitios como FontYükle que proporcionan listas enormes de tipografías, aunque en este caso conviene estar atento a las licencias.

Enlaces y referencias

• Convertir fuentes TTF a EOT, WOFF y SVG para @font-face [ES]
• Embeber fuentes en tu sitio web: la guía definitiva [ES]
• Usa cualquier tipo de fuente en tu web con Font Squirrel facil [ES]
• Fuentes no standar embebidas via CSS (explorer solamente) [ES]
• Tutorial para incluir en nuestra web cualquier tipo de fuente [ES]
• How to create EOT files without Microsoft WEFT [EN]
• Google Web Fonts: Colección de tipografías libres de derechos para usar en proyectos web de forma gratuita [EN]