Tomamos un pequeño descanso del trabajo en la búsqueda para resolver un pequeño problema.
"FOUT" es "Destello de texto sin estilo". 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. Normalmente, esto 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 Typekit JavaScript de forma asincrónica.
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 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 el nombre de la clase desaparezca. Puede 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 luchar contra FOUT, recuerda, solo un poco de sutileza visual.
Hacemos todo esto haciendo un pequeño Sass @mixinllamado "preventFOUT" y -ingándolo @includeen 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.