Llevábamos tiempo pensando crear un artículo como éste, explicando de manera breve lo que se avecina: la inserción nativa de nuevas tipografías en las páginas de Internet.

Viendo que hay pocos post en castellano sobre el tema, hemos decidido crear una guía (muy muy breve!) sobre los comentarios de la comunidad de diseñadores y desarrolladores web en cuanto a insertar tipografías en la web.

Tipografías no estándares en páginas web

¿Quieres saber cuáles han sido nuestras fuentes? Aquí las tienes:

www.alistapart.com

www.webfontspecimen.com

www.nicewebtype.com

Y para convertir fuentes de manera automatizada, la gran herramienta de Font Squirrel:

http://www.fontsquirrel.com/fontface/generator

Yendo al grano, el código CSS3 final para insertar fuentes personalizadas:

/*Recuerda incluir en los comentarios, si la fuente es de uso libre, el enlace al autor de la fuente*/

@font-face {
font-family: "El nombre de tu fuente";
src: url("tipos/archivo_tipo.eot");
src: local("nombre_alternativo"), local("nombre_alternativo"),
url("tipos/archivo_tipo.woff") format("woff"),
url("type/archivo_tipo.otf") format("opentype"),
url("type/archivo_tipo.svg#archivo_tipo") format("svg");
}


Os comentamos a quién va dirigida cada línea de código (como siempre, si queréis investigar más, remitíos a las fuentes del principio del artículo):

Para IE
src: url("tipos/archivo_tipo.eot");
Microsoft está luchando porque su formato Embbeded Open Type se estandarice. Como siempre, las luchas entre navegadores. Desde nuestro punto de vista, el Open type tiene una nitidez que nos gusta; aunque está por ver qué formato ganará la batalla.

Para el resto
IE no lee la propiedad local, por lo que todo a partir de aquí se refiere a otros navegadores. Además estamos indicando que si el usuario dispone de la fuente instalada en su sistema, no la descargue.

Para Firefox 3.5 y Chrome
url("tipos/archivo_tipo.woff") format("woff"), y
url("type/archivo_tipo.svg#archivo_tipo") format("svg");
El formato woff es el que soportará Chrome 4 y Firefox 3.5 ya dispone de compatibilidad con .woff.

¿Y si queremos incluir subtipos?
Como por ejemplo podría ser incluir las itálicas de una tipo:

@font-face {
font-family: "Tu itálica";
src: url("tipos/nombre_tipo_italica.eot");
src: local("Nombre alternativo"), local("Nombre_alternativo"),
url("tipos/nombre_tipo_italica.woff") format("woff"),
url("tipos/nombre_tipo_italica.otf") format("opentype"),
url("tipos/nombre_tipo_italica.svg#nombre_tipo_italica") format("svg");
}


Y de cara al servidor, ¿hace falta realizar modificaciones para aceptar la descarga de tipos?
En Apache es útil especificar mediante .htaccess la disponibilidad de las tipos. Existe bastante información en Internet sobre este punto.

¿Y los navegadores antiguos / obsoletos?
Para aquellos navegadores que no soportan estas especificaciones, tendrás que indicarles cuáles son las fuentes de sustitución (font-stacks) para las fuentes importadas.

font-family: "Tu tipo", Georgia, serif;

De esta manera, si el navegador del usuario no puede importar las fuentes, colocará las fuentes estándar que le indiquemos.

En Alia usamos técnicas de sustitución de fuentes no nativas
Efectivamente en Alia seguimos usando Cufon (es fácil y rápido de implementar) para la sustitución de fuentes no estandarizadas, pero es necesario empezar a plantear la posibilidad de fuentes nativas. Se abren muchos caminos gracias a la ilimitada inclusión de fuentes, tanto en diseño, como en frontend, backend, etc…

Esperamos como siempre, que os sirva de ayuda,

Saludos del equipo humano de Alia Multimedia.