soy Kseso y esto EsCSS

@Font-face y sus problemas. Guía de uso y solucción de problemas

Última actualización: Enero 2013. Una recopilación de los problemas más comunes y sus soluciones, que suelen presentarse al utilizar la regla @font-face de Css para mostrar los textos en tipografías distintas a las safety fonts.

@Font-face y sus problemas. Guía de uso y solucción de problemas

·Por Kseso ✎ 13
Última actualización: Enero 2013

Una recopilación de los problemas más comunes, o no tanto, que suelen presentarse al utilizar la regla @font-face de Css para mostrar los textos en fuentes distintas a las "safety fonts" o "fuentes comunes".

Pero antes de abordarlos, es mejor evitar en la medida de lo posible su aparición. Y para ello no hay nada como conocer cuanto más mejor esta regla de Css. Así que este artículo recoge además de la solución a los posibles imprevistos que te puedan aparecer otros aspectos muy importantes de la regla @font-face y algunos recursos que te serán de utilidad.
Y para facilitarte el moverte por este extenso post, aquí el sumario:

Sumario del artículo

  1. Qué es @font-face y su historia
  2. Soporte de los navegadores a @font-face
  3. @font-face en los mails
  4. Generación de la regla @font-face y los archivos.
  5. Explicación de la regla @font-face y cómo usarla
  6. Recursos y herramientas en línea.
  7. Guía de problemas y soluciones
  8. Buenas prácticas en el uso de @font-face
  9. Alternativas a la regla @Font-face
  10. Créditos y lecturas recomendadas

Qué es @font-face y un poco de historia

Dicho de forma coloquial, es el medio que proporciona Css para que el texto de una web pueda ser mostrado con una determinada tipografía con independencia de que el visitante la tenga instalada en su máquina o no.

Y no, no es una regla de Css3. Su existencia se remonta a muy atrás. Ya aparece en un año tan temprano como 1998, en las especificaciones de Css2, apartado de fuentes.
Pero fue algo antes que Microsoft lo hacía posible en su navegador Internet Explorer 4. También proveía un programa para generar los archivos de las tipografías que necesita. Se conoce como Web Embedding Fonts Tool (WEFT), y la última versión es la 3.2.
Así mismo, el resto de navegadores le dan soporte desde hace muchas versiones/años. Sólo hay que tener presente qué extensión, o tipo de archivo, necesitan.

Soporte de los navegadores a @font-face y sus archivos

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)
Móviles

Safari es compatible con SVG WebFonts a partir del iOS 3.1 y Android soporta otf/ttf partir de la versión 2.2. Firefox móvil en Android soporta WOFF desde la versión 5. Webkit presenta problemas, pues no muestra el texto (es invisible) hasta no haber descargado los archivos de las fuentes. El iPhone y el ipad sólo con el formato SVG.

Si necesitas una más detallada relación de navegadores/SO móviles, consulta este artículo: "Soporte a @font-face de móviles y tabletas"

Los que sí soportan @font-face son:

  • iOS 4.0 - Safari
  • iOS 6 - Safari
  • iOS 6 - UCBrowser
  • iOS 6 - Dolphin
  • Android 4 - Default Browser
  • Android 4 - Opera 12 Mobile (Nexus 7)
  • Android 4 - Chrome
  • Android 4 - Firefox
  • Android 4 - Opera Mobile 12 (weird bug, cf infra)
  • Android 4 - Dolphin
  • BBOS 6 - stock browser
  • Windows 8 x86 - IE10

Y los que no soportan @font-face son:

  • iOS 6 - Opera Mini
  • Android 4 - Opera Mini
  • BBOS 4 - stock browser
  • BBOS 5 - stock browser
  • BBOS 6 - Opera Mini

@font-face en los mails

Soporte a @font-face por los clientes de correoPuedes utilizarlas, pero teniendo presente dos cuestiones:
La imagen de la derecha para ver el soporte de los clientes de correo a la regla @font-face.
Usar como método de inclusión @import en lugar de otros como <link>

Tienes un breve pero muy ilustrativo artículo: Using web fonts in email de Ros Hodgekiss en Campaignmonitor publicado el 10 de Diciembre de 2012.



Generación de la regla @font-face y los archivos

La vía fácil: utiliza Fontsquirrel, ya sea alguno de sus kits o el generador en línea que tiene en su página.
Obtendrás no sólo los archivos de las fuentes, también la regla @font-face, unas página html con la tipografía seleccionada que te servirá de ejemplo y para verificar que funciona y cómo.

También puedes recurrir al programa WEFT de Microsoft, enlace arriba, para generar los eots y a la vez hacer una búsqueda para localizar los distintos archivos que necesitas. Es mucho más entretenido a la vez que aprenderás. Pero si buscas no complicarte la existencia, Fontsquirrel, no lo dudes.

La regla @Font-face: explicación y uso

Bien. Ya tienes los archivos, todos los necesarios. Los de las fuentes tipográficas y el de los estilos. Abres éste último y te encuentras con la siguiente regla @font-face. Es la conocida como "regla Bulletproof":

@font-face { font-family: 'CrimsonRoman'; src: url('Crimson-Roman.eot'); src: url('Crimson-Roman.eot?#iefix') format('embedded-opentype'), url('Crimson-Roman.woff') format('woff'), url('Crimson-Roman.ttf') format('truetype'), url('Crimson-Roman.svg#CrimsonRoman') format('svg'); font-weight: normal; font-style: normal; }

Crédito img: Andysmith Si la familia de la fuente elegida incluye variantes como itálicas, negritas... tendrás una regla @font-face por cada una de ellas.
Debes incluir las reglas que vayas a utilizar en tu página, preferentemente al inicio del archivo css. Y si utilizas algún tipo de reset, después de él.
Veamos qué significa cada línea del código de la regla @font-face.

Explicación de la regla @font-face

font-family: 'CrimsonRoman'; Es el nombre de la fuente. Esta declaración la tienes que incluir en aquellos aquellos elementos que quieras que muestren la fuente. Las comillas no son necesarias, pero sí es recomendables utilizarlas si es un nombre compuesto: 'New Athena Unicode'.
A continuación se le indica al navegador dónde encontrar el archivo de la tipografía. Estas líneas tienes que modificarlas para poner la ruta de los archivos según la estructura de tu site. Recuerda que las rutas incluidas en los archivos css toman como referente al propio archivo css, no a la página donde se carguen los estilos.
src: url('Crimson-Roman-webfont.eot'); La ruta del archivo eot, el propio de Internet Explorer.
src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'), Igual que la anterior, es para IE9, ya que salió al mercado con un bug:

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. [+ info]

Las siguientes url son para indicarle a cada navegador la ruta al archivo de la fuente que maneja cada uno.
font-weight: normal; font-style: normal; Se incluyen estas dos declaraciones para evitar que los navegadores rendericen las tipografías cambiando el peso y estilo de la misma. Pues a pesar de ser los valores por defecto en la mayoría de los navegadores, no lo es en Webkit. Por la misma razón puedes añadir la declaración font-variant: normal

Declarar @font-face a los selectores

Bien, ya tienes los archivos de las fuentes, las reglas @font-face y además las comprendes. Ha llegado el momento de aplicar esa tipografía tan especial para verla en la página. Es tan sencillo como hacer lo siguiente:
Supongamos que quieres que tus h1 se vean con ella. Pues en la regla en la que definas sus propiedades la incluyes así:

h1 { font-family: CrimsonRoman, Georgia, Garamond, serif; }

Y ya está. Así de sencillo. Es conveniente añadir el nombre de alguna tipo más por si fallase la elegida y terminar la declaración con el nombre de la familia a la que pertenece (serif en nuestro ejemplo).

Caritas y otros símbolos en @font-face

Es posible que te encuentres en alguna regla @font-face con una línea como la siguiente, o muy parecida, que incluye uan carita (☺), corazón o cualquier otro símbolo extraño:

@font-face { src: local('♥'),

Es una variación a la regla Bulletproof. Se incluye para evitar que si en la máquina que accede a la página hay alguna tipografía con el mismo nombre la utilice en vez de la nuestra.
El problema con incluir esta línea es que Android no soporta la llamada a local. Así que si la pones puedes prevenirlo incluyendo la regla @font-face para estos dispositivos en una @media querie.

Variaciones en la sintaxis de @font-face y su inclusión:

Paul Irish tiene un artículo al respecto: Bulletproof @font-face syntax donde podrás ver otras sintaxis diferente, así como variaciones, forma de hacer la llamada y ejemplos de cada una de ellas.

Recursos y herramientas en línea

Fontsquirrel

fontsquirrelPosíblemente Fontsquirrel sea el servicio más conocido y utilizado. Entre otras, cuenta con:

  1. Una ingente cantidad de kits @font-face listos para bajar y usar.
  2. Generador de @font-face: Si tu tipografía elegida no está ya en sus kits puedes subir tu archivo y crearlo.
  3. Foro de consultas.
  4. Blog sobre la temática.

Google Font API

google fonts apiGoogle tiene disponible un servicio libre y gratuito para incluir fuentes en las páginas. No cualquier fuente, sólo las que tiene disponible. En este momento 501 613 familias.
Ayudas para conocerlo y usarlo:

Tiene la particularidad que podrás incluirlas de tres formas distintas:

  1. Utilizando en el head un <link href=
  2. Con la regla @import de css: @import url(http://fonts.googleapi ...)
  3. Utilizando javascript

Adobe Edge Web Fonts

Adobe Edge Web Fonts

Adobe Edge Web Fonts es una herramienta, también en línea, de Adobe, asociada con Google fonts y con la tecnología de Typekit para ofrecer básicamente lo mismo: un servico de tipografías para la web..
En ese enlace tienes un amplio artículo de elaboración propia sobre esta herramienta

We love icon fonts

"We love icon fonts" es un servidor remoto de fuentes de iconos o pictogramas. Similar a Google Fonts en el servicio que ofrece, pero supliendo una carencia actual de Google. En este blog tienes un artículo explicando a fondo qué es y cómo usarlo.

Métodos de pago

También los hay. Si estás interesado en alguno de ellos, no te costará mucho encontrarlos.

@Font-face: Guía de problemas y soluciones

Las tipografías no se ven en ningún navegador:

Crédito img: Andysmith ✦ Asegúrate que has subido los archivos de las fuentes, todos, al servidor y de que las rutas son correctas. Si aún persiste puede que tu archivo .htaccess esté impidiéndolo.
✦ También hay veces que el archivo de la tipografía está mal o no se ha subido correctamente al servidor. Asegúrate de su integridad.

Formato SVG: las fuentes en el iphone/ipad

✦ ¿Problemas con el MIME type en los SVG por no tenerlo declarado? Asegúrate que lo haces como " AddType image/svg + xml svg svgz AddEncoding gzip svgz" en la configuración del servidor. [+info]
✦ Iphone y SVG: si utilizas "cache manifest" no se mostrarán. La razón: trata el # como comentarios y Safari Mobile necesita el ID de la fuente en la URL.
text-overflow: ellipsis; muestra sólo "…" y nada más.
✦ Letter-spacing parece que no trabaja con las fuentes SVG.

Si es en Firefox o IE9

✦ ¿Tu versión es anterior a la FF3.5? Actualízate. Si es posterior, FF e IE9 no muestran las fuentes si los archivos están en un dominio distinto al que aloja la página.
✦ Si no puedes alojarlas en tu site, es posible que necesites añadir WOFF a la lista de tipos MIME permitidos en tu .htaccess [+info]. Otra solucción es codificarlas en base64.

✦ Solución: cross-domain para @font-face en Firefox
Artículo en KsesoCss para lograrlo.

Mal renderizado de las tipografías

✦ El uso de "text-transform:uppercase" puede no funcionar.
✦ font-size-adjust puede ayudar a mejorar la visualización
✦ Los IE<9 en windows utilizan el "ClearType" y su anti-aliasing. Esta técnica provoca, en muchos casos, un dibujado de las tipografías deficiente. Puedes intentar corregirlo utilizando uno de los filter de Microsoft o con Jquery.

Webkit: Chrome y Safari

Chrome al hacer uso del servicio de Google Fonts con tipografías itálicas no las muestra si no declaras en cada elemento que la incorpore la propiedad Font-style: italic. Más info en este artículo.

✦ Los navegadores basados en webkit tienen algunos "comportamientos particulares" con el tratamiento que hacen de los textos. No se si será por el tema del antialiased y subpixel-antialiased. Es un tema que desconozco.
Lo que puedes intentar es hacer uso de algunas propiedades privativas y jugar con los distintos valores para ver si logras mejorar la visión. Mira la imagen.

-webkit-text-stroke: .25px -webkit-font-smoothing: none;

Chrome

✦ El navegador de google tiene algunas "particularidades" al mostrar las tipografías. En algunas partes recomiendan colocar su valor inmediatamente después de los de IE, en vez de ser el último (como suele ser habitual):

@font-face { font-family: 'CrimsonRoman'; src: url('Crimson-Roman.eot'); src: url('Crimson-Roman.eot?#iefix') format('embedded-opentype'), url('Crimson-Roman.svg#CrimsonRoman') format('svg'), url('Crimson-Roman.woff') format('woff'), url('Crimson-Roman.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Firefox en Linux

✦ No sirve las fuentes con el protocolo file:// [+info]

IE en máquinas virtuales y servicios de screenshot

✦ Verifícalo, si puedes, en un windows real. Muchos servicios que muestran cómo se verán las páginas en distintos SO y navegadores fallan y no las muestran.

@Font-face y Canvas

✦ Demoras en la carga y visión de la tipografía: [ver aquí]

Buenas prácticas

✦ Comprime los archivos de las fuentes (gzip) antes de servirlos.
Optimiza y aligera el servicio de google fonts cargando sólo el juego de caracteres que necesites.
✦ font-size-adjust puede ayudar a mejorar la visualización.
✦ No todas las tipografías se pueden utilizar en @font-face, ni todas las que se pueden usar se verán bien en todas las situaciones: ✥ La mayoría de ellas lucen bien en un rango muy concreto de font-size. Cuanto más se alejen de él, peor. ✥ Procura no utilizar pesos y estilos (f-weight/f-style) distintos a la fuente original. Los navegadores suelen deformar la tipografía al añadirle px en el bold o al inclinarlas. ✥ Asegúrate de la licencia de las fuentes que utilices. Respeta el trabajo ajeno. Si conoces a su autor y permite su uso en la web, qué menos que mencionarlo en el css, dentro de un comentario.

Alternativas a la regla @Font-face de Css

Sí, hay vida más allá de @font-face. O lo que es lo mismo, existen otros métodos para utilizar tipografías distintas a las "safery fonts" en las páginas webs.
Básicamente son dos métodos. Los conocidos como métodos de sustitución y el que ofrece google.

Los de sustitución se llaman así porque en un principio lo que hacían era reemplazar el texto por imágenes del mismo o por transformarlo a flash. Prácticas ya abandonadas.

Scripts

Aquí tienes una recopilación de algunos de estos scripts. Recopilación hecha por Dezinerfolio que encontré en Anieto2k.

Créditos, reconocimientos y lecturas recomendadas

Como comprenderás, toda la información de este artículo no ha salido de mi cabeza ni es 100% original. Los artículos originales, además de las fuentes ya enlazadas, y algún otro donde puedes ampliar la información:

Y a partir de estos artículos, si tienes curiosidad y ganas de informarte más sobre @font-face, sólo tienes que seguir "el rastro de migas" que hay en ellos.

Tu turno:

Y después de todo lo anterior, sólo queda una cuestión pendiente:

Y tú, ¿qué tienes/puedes/quieres decir al respecto? Justo debajo tienes el formulario de los comentarios para dejar tu opinión o experiencias con el uso de @font-face.

avatar del Editor del blog

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.
@Kseso EsCss Kseso