Ci prendiamo una piccola pausa dal lavoro sulla ricerca per risolvere un piccolo problema fastidioso.
"FOUT" è "Flash of Unstyled Text". Questo è un fenomeno in cui i caratteri @ font-face impiegano un po 'a caricarsi e quindi si vede il carattere di riserva prima del carattere personalizzato. Questo normalmente non è un problema in Typekit. Né è davvero un problema nei browser moderni in questi giorni (tranne IE 9). Tuttavia, è un problema per noi perché abbiamo scelto specificamente di caricare il JavaScript Typekit in modo asincrono.
La speranza però non è persa, Typekit ha risolto questo problema, dobbiamo solo fare un po 'di lavoro sul nostro sito. Mettiamo un nuovo nome di classe sull'elemento chiamato "wf-loading" (caricamento dei caratteri web). Quindi nel nostro CSS, dichiariamo che qualsiasi selettore che utilizza un carattere personalizzato è visibilmente nascosto fino a quando il nome della classe non scompare. Potresti pensare un po 'rischioso, ma se il carattere non viene caricato c'è un timeout che rimuove comunque la classe. Questo è solo per combattere FOUT, ricorda, solo un po 'di raffinatezza visiva.
Facciamo tutto questo creando un piccolo Sass @mixinchiamato "preventFOUT" e inserendolo @includenei nostri stack di caratteri personalizzati, che sono anche @mixins.
Ora funziona bene per noi. Alla fine in questo design passiamo ai font HF&J in cui vengono caricati direttamente tramite @ font-face, quindi praticamente smettiamo di preoccuparci di questo.