Luăm o mică pauză de la lucrul la căutare pentru a rezolva o mică problemă negativă.
„FOUT” fiind „Flash de text nestilizat”. Acesta este fenomenul în care fonturile @ font-face necesită un pic de încărcare și astfel vedeți fontul alternativ înainte de fontul personalizat. În mod normal, aceasta nu este o problemă în Typekit. Nici nu este o problemă în browserele moderne din zilele noastre (cu excepția IE 9). Cu toate acestea, este o problemă pentru noi, deoarece am ales în mod special să încărcăm JavaScript Typekit în mod asincron.
Speranța nu se pierde, Typekit are această problemă acoperită, trebuie doar să facem o mică parte a lucrului pe site-ul nostru. Am pus un nou nume de clasă pe elementul numit „wf-loading” (încărcare font web). Apoi, în CSS, declarăm că orice selector care folosește un font personalizat este vizibil ascuns până când numele clasei respectivă dispare. Un pic riscant s-ar putea să credeți, dar dacă fontul nu reușește să se încarce, există un timeout care oricum elimină clasa. Acest lucru este doar pentru a lupta FOUT amintiți-vă, doar puțină frumusețe vizuală.
Facem toate acestea făcând un mic Sass @mixinnumit „preventFOUT” și introducându- @includel în stivele noastre de fonturi personalizate, care sunt, de asemenea, @mixins.
Acest lucru funcționează bine pentru noi acum. În cele din urmă, în acest design trecem la fonturile HF&J în care se încarcă direct prin @ font-face, astfel încât, practic, nu ne mai îngrijorăm de acest lucru.