soy Kseso y esto EsCSS

Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading... (V)

Quinta entrega de "Arrieros somos". Artículos recopilatorios de posts de interés sobre un tema determinado. Éste sobre @font-face y sus problemas, como el FOUT o FOIT.

Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading... (V)

·Por Kseso ✎ 1
Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading

Hoy día, año 2015, el uso de tipografías de autor en la web es algo tan normalizado como el uso de colores e imágenes. Pero como en estas últimas, imágenes, al usarlas hay que tener presente algunas cuestiones para que su uso no penalice el funcionamiento y apariencia de la web.

Al usar la regla @font-face se suelen presentar algunos problemas. Unos, como el renderizado de los textos, son de sobra conocidos y hay soluciones más o menos efectivas. Sin embargo hay un segundo grupo de incidencias que no han tenido la misma difusión y sobre las que aún se está en proceso de hallar una solución óptima.

Entre estos últimos encontramos, entre otros, el conocido como FOIT (Flash of Invisible Text) asociado al tiempo de carga de las tipografías (Font loading).

Y entre los primeros suelen estar todos los relacionados con el aspecto que presentan los textos (renderizado).

Uso de @font-face, problemas de carga, renderizado y optimización

FOIT (Flash of Invisible Text) o FOUT (flash of unstyled text) es un molesto efecto caracterizado porque el navegador hace invisible el texto hasta que no terminan de cargarse los archivos tipográficos declarados en la regla @font-face.

El Foit tiende a ser más problemático en navegadores como Safari de iOS, que oculta el texto hasta un máximo de 30 segundos antes de darse por vencido y mostrarlo con una fuente predeterminada, pero también se puede ver con duraciones más cortas en los navegadores Chrome, Firefox, y Opera.

Font Loading Revisited with Font Events

Artículo de @scottjehl en la web filamentgroup.com sobre el efecto FOIT y cómo evitarlo.

Su solucción pasa por el uso de un script que, una vez cargados los archivos tipográficos usados, añade una clase al html. Esta clase es la que habilita la declaración de las fuentes:

body { font-family: sans-serif; } .fonts-loaded body { font-family: Source Sans Pro, sans-serif; }

Fighting the @font-face FOUT

Veterano y clásico artículo (2009) de @paul_irish en el que por primera vez (creo) describía el problema y ofrecía una guía de buenas prácticas y soluciones.

Con posterioridad a este artículo publicó una actualización en html5rocks.com: Dealing with FOUT.

Better @font-face with Font Load Events

Artículo en dev.opera.com de Zach Leatherman @zachleat.

En este artículo, voy a hacer el argumento de que las implementaciones actuales de @font-face son realmente perjudiciales para el rendimiento y la facilidad de uso de la web. Estos problemas se ven agravados por el hecho de que los desarrolladores han comenzado a usar @ font-face para dos casos de uso completamente diferentes : fuentes de contenido y fuentes de iconos, que deben ser manejados de manera diferente. Pero hay esperanza. Podemos hacer pequeños cambios en cómo se cargan estas fuentes para mitigar esos inconvenientes y hacer el trabajo en la web mejor para todos.

Del mismo autor, el post Flash of Faux Text—still more on Font Loading del 22 de Enero de 2015.

Controlling the Flash of Unstyled Text (or FOUT) using Font Events

Artículo del Centro de Ayuda de Adobe Typekit para controlar el efecto FOUT.

Web Font Loader

Librería JavaScript desarrollada por Google y Typekit. Ofrece una mayor control en la carga de fuentes de la API de Google Fonts. Compatible con otros servicios como Typekit, Fonts.com y Fontdeck.

Web Font Anti-Patterns

Al­most every web de­vel­oper has used web fonts. Un­for­tu­nately, there is a lot of con­fu­sion about web fonts. Are they re­ally bad for per­for­mance? Maybe you should not use web fonts at all?
Bram Stein

En esta página, su autor @bram_stein, está publicando una serie de artículos sobre el particular. De momento son 3 los que ya están en línea. Según indica la serie constará al menos de otros 3 más.

  1. Overus­ing web fonts
  2. In­lin­ing fonts
  3. Ag­gres­sive sub­set­ting
  4. Using local fonts (coming soon)
  5. Reimplementing caching (coming soon)
  6. Not styling fallback fonts (coming soon)
Las 2 imágenes del post de Internet Archive Book Images

Explicación de la regla @Font-face, sus problemas y solucciones

Explicación de la regla @font-face y recopilación de las soluciones a los problemas más comunes que suelen presentarse al utilizar la regla para mostrar los textos en tipografías distintas a las safety fonts.

Cross-domain, @font-face y Firefox

El navegador Firefox es uno de los más estrictos a la hora de aplicar las restricciones Same-origin también en la regla @font-face. En este artículo tienes una forma para permitir la carga de fuentes desde dominios y subdominios diferentes (cross-domain).

Uso optimizado de google fonts

Un breve post para que hagas más livianos los archivos tipográficos y por lo tanto agilices la carga de la página si usas el servicio de Google fonts.

Adobe Edge Web Fonts a fondo. Guía de uso y comparativa con Google fonts

Adobe® Edge Web Fonts es un servicio que proporciona acceso a tipografías para la web. O lo que es lo mismo, otra forma de usar tipografías sin necesidad de alojar los archivos ni crear las reglas @font-face de Css. Es una herramientas de Adobe. El servicio es gratuito y en su funcionamiento similar a Google fonts.

Otros artículos del blog etiquetados con @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