WebFonts
Resulta paradójico que un organismo como W3C, encargado de mantener y estandarizar los lenguajes webs, y que básicamente ofrece una manera de mostrar textos (y alguna que otra imagen), haya tardado tanto en estandarizar un modelo tipográfico aceptable.
Desde su nacimiento, Internet no ha ido de la mano del diseño. Las primeras webs, páginas de texto casi íntegras, únicamente ofrecían al lector aquellas tipografías que tenían instaladas en su SO, esto es, Times New Roman y Helvética. La dependencia de las fuentes cliente se arrastró incluso en los años 90, aún cuando Apple decidió incluir numerosas fuentes en sus Mac, y Windows acabó por competir en este aspecto. Y es que el diseñador no tenía forma de saber con qué fuentes contaba el usuario, teniendo que declarar familias enteras y una jerarquía de elección mediante hojas de estilo.
Afortunadamente, la W3C ha estandarizado un formato de fuentes WOFF 1.0, tanto TrueType, OpenType, Open Font Format, PostScript o SVG, de forma que ahora podemos empaquetarlas en el mismo proyecto y cargarlas en el cliente desde el servidor.
Supongo que muchos de vosotros ya habréis usado herramientas como Adobe Web Fonts o WebFonts (de Google), tipografías en línea que permiten de forma sencilla y gratuita su uso mediante una llamada a sus servidores, pero se agradece que podamos implementarlas nosotros mismos en nuestro servidor (por lo que nos ahorramos el tiempo de consulta a un servidor de terceros en cada carga de la página que requiera fuentes externas).
Para hacer uso de las WOFF, han recurrido a la regla @font-face, que vio la luz con CSS2, pero que no ha sido hasta CSS3 que empieza a usarse de forma nativa.
Su síntasis consta de dos partes. Una declaración mediante @font-face, y su implementación en la regla que necesitemos llamándola por el nombre que le hemos puesto en la declaración. Algorítmicamente sería algo así:
@font-face{
font-family:<nombre_fuente>;
src: <protocol>[,<source>]*;
[font-weight:<weigth>];
[font-style:<style>];
}
<regla>{
font-family: “<nombre_fuente>”;
}
Y como ejemplo de uso:
@font-face {
font-family: Vivaldi;
font-style: normal;
font-weight: normal;
src: url(VIVALDI0.eot);
}H1{
font-family: “Vivaldi”;
}
La única salvedad que hay que tener en cuenta es que si bien todos los navegadores actuales corren sin problemas con WOFF, parece que está dando problemas con versiones antiguas del navegador por defecto de Android y Safari Móvil, así que no está demás declarar una jerarquía de tipografías para éstos últimos (aunque sea al menos la familia a la que pertenece, para que no nos coja por defecto la odiosa Times New Roman).
