En el artículo anterior explicaba cómo incorporar una fuente a una web empleando Google Fonts. Es una forma muy cómoda, pero también existe otra más ortodoxa y es una regla de CSS llamada @font-face.

En teoría, debería ser muy fácil de usar. Se sube la fuente al servidor y en el archivo CSS se escribe algo así:

@font-face {
font-family: nombre de la fuente;
src: url(url de la fuente);
}

Por ejemplo:

@font-face {
font-family: TravelingTypewriter;
src: url(TravelingTypewriter.ttf);
}

Y para usarla basta con poner su nombre, sin comillas, como cualquier otro valor de font-family

p {
font-family: Gentium, serif;
}

Ahora bien, hay que hacer algún apañejo para que funcione correctamente o, mejor dicho, para que funcione en el Explorer, un navegador con menos capacidad de interpretar las CSS que una tostadora asilvestrada :mrgreen:.

Como sabes, hay varios tipos de fuentes para web:

• woff - Web Open Font Format (.woff)
• truetype (.ttf)
• opentype (.otf, ttf)
• embedded-opentype (.eot)
• svg (.svg, .svgz)

Prácticamente, el Explorer solo es capaz de interpretar las fuentes embedded-opentype (.eot), que es un formato OpenType para Internet diseñado por Microsoft y, claro, solo funciona en este desastre de navegador. Aunque resulta muy tentador olvidarse de cómo se vean las cosas en el Explorer, todavía es muy popular, por lo que no queda más remedio que buscar una solución que se adapte a cada caso.

En teoría, según las especificaciones de la W3C, debería bastar con ir añadiendo urls con los distintos formatos separados por comas. Si un navegador no es capaz de interpretar el primero, debería pasar al segundo y así hasta que coja uno.

External references consist of a URI, followed by an optional hint describing the format of the font resource referenced by that URI. The format hint contains a comma-separated list of format strings that denote well-known font formats. Conformant user agents must skip downloading a font resource if the format hints indicate only unsupported or unknown font formats. If no format hints are supplied, the user agent should download the font resource.

Lo cual, incluida una ñapa para el explorer, quedaría así, por ejemplo:

@font-face {
font-family: 'thebit';
src: url('fonts/futuran-webfont-webfont.eot');
src: url('fonts/futuran-webfont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/futuran-webfont-webfont.woff') format('woff'),
url('fonts/futuran-webfont-webfont.ttf') format('truetype'),
url('fonts/futuran-webfont-webfont.svg#futura_bk_btbook') format('svg');
}

Luego ya basta con usar la propiedad font-family.

font-family: thebit, Verdana, Arial, Helvetica, sans-serif;

Una cosa más para terminar, por lo general, las fuentes que manejamos suelen ser ttf y otf. Para convertirlas a eot y demás hay varias aplicaciones on line. Una muy completa es @font-face generator de Font Squirrel; otra que funciona muy bien es la aplicación de Kirsle.net.

Notas

Formatos de fuentes que soportan los navegadores según webfonts.info.