@font-face Generación y uso de fuentes no estándar en la web 26.2.12

@font-face Generación y uso de fuentes no estándar en la web

·Por Kseso ⧉ 26.2.12 ⚑ font-face ⚑ texto ✎ 0

Objetivo del Tutotial:

Una de las cuestiones que se plantea cada poco tiempo es si se puede y cómo liberarse de la tiranía de las "fuentes seguras" o "safety fonts".
Hasta no hace mucho tiempo, todo pasaba por el uso de alguna técnica de reemplazo de texto, tipo Sifr, Cufón o similares. Pues si bien es cierto que ya existía la posibilidad de utilizar la regla de css @font-face, apenas estaba implementada por los navegadores.

Así mismo, la familia de Internet Explorer era otro escollo, pues ni la última versión la incluye. Aunque desde hace tiempo, microsoft tiene disponible una herramienta para utilizarlas bajo extensión .eot (Embedded Open Type).
Lo que intentaré aquí es explicarte cómo utilizar fuentes en tus proyectos, utilizando conjuntamente @font-face y creando los archivos .eot para garantizar que los usuarios de ie también pueden disfrutarlas.
Verifica que el navegador y la versión que utilizas soportan @font-face.
Estos son:
Info ampliada 09/2010, Ver más abajo

"Material" Necesario:

En primer lugar, los archivos de las fuentes que queramos implementar. Páginas como Dafont, Fontica y similares te serán de utilidad.
La aplicación WEFT para crear los archivos .eot
Y lo más importante, ganas de experimentar y un poco de paciencia. Pues seguro que el primer resultado obtenido habrá que pulirlo un poco en los siguientes.

Web Embedding Fonts Tool: WEFT

WEFT es la aplicación de microsoft para realizar los archivos de fuentes que pueden manejar sus navegadores. El anlace anterior te lleva a la página (en inglés) desde donde podrás bajarte esta herramienta. Además, ahí tienes la información necesaria para su uso.
Como es lógico, lo primero es descargar el programa e instalarlo. A continuación lo lanzamos. Importante tener instaladas en nuestro sistema las fuentes que vayamos a utilizar, pues lo primero que hace es crear una relación de ellas.
No te preocupes si posteriormente añades alguna, pues se actualizará
Vamos a crear los archivos .eot. Sería bueno que tengas abierta esta página. Para ello vamos a servirnos de la opción "Wizard".

Creando los archivos .EOT

Obviaremos el paso inical al ejecutar el programa la primera vez. Una vez hecho, vamos directos al botón "wizard" y el programa nos irá llevando por diferentes pantallas:

Añadiendo Páginas:

Si ya tenemos las páginas creadas, aquí las enlazamos. Pueden estar en un dominio o en el disco duro.

Podemos obviarlo marcando "Do not add linked pages".

Analizando las páginas:

Las que hayamos enlazado en la pantalla anterior.
También podemos evitarlo seleccionando "Skip analysis".

Seleccionando las Fuentes

Aquí comienza la generación de los archivos .eot. En esta pantalla podremos seleccionar los .ttf que deseemos. Los símbolos que anteceden a cada fuente significan: Verde: perfecto. Podemos incluirla. Las etiquetadas como "Previewable" no las aconseja utilizar con páginas dinámicas. Amarillas: las considera fuentes comunes y que no merece la pena. Pero recuerda que "piensa en windows". Rojo: no se podrá crear el .eot.

Generando los "Font objet":

Primer campo: destino de los archivos creados.
Segundo: los dominios donde podrán ser usados. Se corresponden con los ingresados anteriormente. Esto hace que ie sólo aplique los .eot en aquellos dominios indicados. Son lo que llama "URL binding".
Asegúrate que incluyes tu dominio tanto con www. como sin ellas, y para poder hacer las pruebas en local, incluye los discos duros locales.

Css para IE

Sólo tendremos que copiar y pegar en el css expecífico para ie. Esto lo vemos a continuación.

Los .eot generados

Ya tendremos los archivos generados. Sólo nos resta colocarlos en la carpeta que hayamos creado para ser subida el servidor.

Todo lo anterior es una orientación sólamente. La guía detallada con las distintas opciones y los significados de cada una de ella la tienes a tu disposicón en la página de microsoft que te enlazo de nuevo. A ella te remito, y te aconsejo que sea tu referencia en todo el proceso.

Aplicando el CSS

Si hemos realizado todos los pasos anteriores con éxito, ya tendremos en nuestra carpeta los archivos .eot y .ttf de las fuentes. Sólo resta incluir en nuestro css las reglas correspondientes para utilizarlas. El cómo incluirlas o hacer la llamada a tus estilos no es objeto de este tutorial. Hazlo como acostumbres. Pero sí sería conveniente que las correspondientes a IE lo hagas mediante un comentario condicional para evitar que el validador te marque error en tus estilos.

@Font-Face

En los navegadores y sus versiones que ya soportan la regla "@font-face" es tan sencillo aplicarla como:
Subir los archivos de las fuentes a nuestro servidor.
Enlazarlos utilizando el siguiente código:


<style type="text/css">
/*Importamos nuestras fuentes*/
@font-face {
  font-family: 'saxmono';
  src: url('ruta/saxmono_1.ttf') format("truetype");
 }

@font-face {
  font-family: 'centabel book';
  src: url('tu_ruta/c_box_0.ttf') format("truetype");
 }
</style>

@Font-Face para IE

Para la familia de IE deberemos también subir los archivos .eot creados a nuestro servidor.
Hacer la llamada a ellos con la regla @font-face, pero como te decía antes, mediante el oportuno comentario condicional.


<!--Importamos los .eot creados con nuestras fuentes para IE -->
<!--[if IE]>
<style type="text/css">
@font-face {
  font-family:'saxmono';
  src: url('tu_ruta/SAXMONO.eot');
 }

@font-face {
  font-family:'centabel book';
  src: url('tu_ruta/CENTAB.eot');
 }
</style>
<![endif]-->

Optimizando la regla @Font-Face

Pero si lo deseamos, podemos incluir las dos declaraciones, la llamada al .ttf y al .eot, en una sóla. También podemos incluir una llamada a la fuente en el disco duro del visitante por si la tuviese instalada.
La mejor declaración conjunta que he encontrado quedaría así, incluido el formato en svg para Chrome:


@font-face {
 font-family: 'saxmono';
 src: url('saxmono.eot');
 src: local('♥'),
 src: url('saxmono.ttf') format('truetype'), url('saxmono.svg##codigosvg') format('svg');
 }

Importante que respetes el orden de los "src": primero la llamada al "eot". Esto es así para que ie sólo descargue su archivo de fuente, y el resto de navegadores el "ttf" o el "otf".
Simplificando, lo que ocurre con la segunda ruta e IE es que ese navegador no interpreta la llamada a "local()" y en las ubicaciones múltiples se queda con la última, pero como se encuentra con "format()" que también le suena a chino, se queda sólo con el ".eot"
Y sí, has visto bien y la primera llamada en la ruta local es un corazón (♥). Otros autores utilizan una carita -smile-. Pero el porqué lo dejo a tu investigación. Puedes comenzar por aquí

Modificación de la sintaxis

3/02/2011
Según leo en algunas páginas, ie9 viene con un bug en la lectura de la declaración de @font-face. Para corregirlo basta añadir un # a la extensión del .eot de la ruta al archivo de la fuente.
La explicación (mi traducción por libre):

Internet Explorer 9 tiene un error en el analizador del atributo src. Si se incluye más de un formato de fuente en la declaración, IE no lo carga y devuerlve un error 404. La razón es que el IE interpreta como una sóla ruta todo lo que está entre el paréntesis de apertura y el último paréntesis de cierre. Al añadir el # al final de la extensión .eot lo fuerza a interpretar todo lo siguiente al # como un fragmento de la url y así sí carga su archivo eot. Al resto de navegadores no le afecta.

El origen y fuente de lo anterior lo puedes ver aquí [ing].
Quedaría así la declaración:


@font-face {
  font-family: 'miFuente';
    src: url('miFuente.eot#') format('embedded-opentype'); 
    src: local('♥'),
    url('miFuente.woff') format('woff'), 
    url('miFuente.ttf')  format('truetype'),
    url('miFuente.svg#codigosvg') format('svg');
 }

Amplía Información:

Aplicando los estilos:

Y ahora sólo nos queda aplicar las fuentes a los elementos que deseemos vía nuestro css. Como siempre hacemos:


<style type="text/css">
/*las aplicamos a los elementos deseados*/
code {font-family: saxmono, monospace;}
.p {font-family: 'centabel book', serif;}
</style>

Si todo ha ido bien, podrás ver el resultado.
Posiblemente la propiedad @font-face sea la "novedad" de Css3 que más puede hacer para cambiar, con un mínimo de trabajo, el aspecto tus páginas. Eso y una elección de colores adecuada.

Soporte de @font-face por los Navegadores:

Internet Explorer

Desde IE 4
Formatos soportados:
- Embedded OpenType (EOT)
Más info: Aquí

Mozilla/Firefox

Desde Firefox 3.5
Formatos soportados:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- WOFF (desde Firefox 3.6)

Google Chrome

Chrome 4.0. Enero 2010
Chrome 3.0. Se puede habilitar con: --enable-remote-fonts [+ info]
Fue deshabilitada por razones de seguridad: [1] , [2] , [3]
Más detalles Chrome y @font-face
Formatos soportados:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)

Opera

Desde Opera 10 and OperaMovil 9.7
Formatos soportados:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- SVG (.svg)
Más info: Aquí

Safari/Webkit

Desde la versión 3.1
Formatos soportados:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- SafariMobile (iPhone/iPad): sólo SVG
Más info: Aquí

Nescape

Desde la versión 4, discontinuado desde Netscape Navigator 6
Formatos soportados:
- Portable Font Resource (.pfr)

Información obtenida en parte por pruebas propias y en parte de diversas fuentes de la red.

Consideraciones Semi-Finales ^{(la guia esta en constante actualizacion)}

Quizás debería haber alguna, pero hoy no la hay. Sólo añadir una pequeña y típica declaración de exención de responsabilidad si utilizas ésto. Tómalo sólo como una orientación y una invitación a "jugar" con css y sus posibilidades. Pero todo bajo tu única responsabilidad ;-)

Atención a la licencia de la fuente:

Por respeto y responsabilidad no olvides verificar la licencia de cada archivo de fuente que vayas a utilizar.
Ah! Por cierto, creo que unos artículos interesantes para ampliar información sobre el tema, pueden ser los publicados por:

A tener en cuenta:

La regla @font-face, como no podía ser menos, tambien se ve afectada por las particularidades de cada navegador. Así que hay algunas cuestiones que deberías tener presentes, por si te surgen, para no desesperar y dudar de si lo has hecho bien o mal.
Algunas de ellas las tiene documentadas Paul Irish (y sus lectores) en el artículo "@font-face gotchas"

Otros caminos para lo mismo:

Técnicas de reemplazo:

Si lo anterior no te convence por alguna razón, que sepas que hay unas cuantas alternativas al uso de CSS y @font-face. Son conocidas como técnicas de reemplazo porque en el inicio sustituían el texto por otros objetos, como imágenes o flash.

Recopilación hecha por Dezinerfolio que encontré en Anieto2k.

Google Font API

19 de Mayo de 2010: Google ha sacado una API para poder hacer ésto mismo. De momento, las tipografías disponibles son pocas, aunque es de suponer que con el paso del tiempo aumentará.
La Guía de Google Font API, el Directorio de fuentes disponibles en Google y algunos artículos aparecidos ya al respecto donde podrás obtener información complementaria:

Y una guía de uso de la Google Font API de Six Revisions [ING]
Puedes usar este servicio aún en beta de Google para generar todo el código necesario para usar su API y al mismo tiempo ver en línea cómo queda la tipo elegida

Un premio: Generador de @font-face y Kits

para quienes no quieran hacerlo por si mismos y como pago por haber llegado hasta el final, en Fontsquirrel tienen, además de otros recursos, un generador de @font-face y Kits listos para su uso.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.