Arrieros somos y bálsamos traemos para @font-face: render, FOIT, font loading... (V) 16.10.15
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)
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
Almost every web developer has used web fonts. Unfortunately, there is a lot of confusion about web fonts. Are they really bad for performance? 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.
- Overusing web fonts
- Inlining fonts
- Aggressive subsetting
- Using local fonts (coming soon)
- Reimplementing caching (coming soon)
- Not styling fallback fonts (coming soon)
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.
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.
@Kseso EsCss Kseso
Excelente post. Fue de gran ayuda. Saludos!
ResponderEliminar