#035: Prevención de Typekit FOUT | Programar Plus

← Vídeo anterior Vídeo siguiente →

Nos tomamos un pequeño descanso del trabajo de búsqueda para resolver un pequeño problema.

“FOUT” es “Flash of Unstyled Text”. Este es un fenómeno en el que las fuentes @font-face tardan un poco en cargarse y, por lo tanto, se ve la fuente alternativa antes que la fuente personalizada. Esto normalmente no es un problema en Typekit. Tampoco es realmente un problema en los navegadores modernos en estos días (excepto IE 9). Sin embargo, es un problema para nosotros porque hemos elegido específicamente cargar el JavaScript de Typekit de forma asíncrona.

Sin embargo, la esperanza no se pierde, Typekit tiene este problema cubierto, solo necesitamos hacer un poco de trabajo en nuestro sitio. Ponemos un nuevo nombre de clase en el <html> elemento llamado “wf-loading” (carga de fuentes web). Luego, en nuestro CSS, declaramos que cualquier selector que use una fuente personalizada está visiblemente oculto hasta que ese nombre de clase desaparezca. Podría pensar que es un poco arriesgado, pero si la fuente no se carga, hay un tiempo de espera que elimina la clase de todos modos. Esto es solo para pelear FOUT recuerda, solo un poco de sutileza visual.

Hacemos todo esto haciendo un poco de Sass @mixin llamado “preventFOUT” y @include-ing en nuestras pilas de fuentes personalizadas, que también son @mixins.

Esto funciona bien para nosotros ahora. En última instancia, en este diseño pasamos a las fuentes HF&J en las que se cargan directamente a través de @font-face, por lo que básicamente dejamos de preocuparnos por esto.

(Visited 4 times, 1 visits today)