# 035: Sprječavanje Typekit FOUT - CSS-trikovi

Anonim

Uzimamo malu pauzu u radu na pretraživanju kako bismo riješili mali problem.

"FOUT" je "Bljesak neuglađenog teksta". To je fenomen kada se fontovima @ font-face treba malo učitati i tako vidite zamjenski font prije prilagođenog fonta. To obično nije problem u Typekitu. Niti danas to nije problem u modernim preglednicima (osim IE 9). Međutim, to nam predstavlja problem jer smo posebno odlučili učitati Typekit JavaScript asinkrono.

Nada se ipak nije izgubila, Typekit pokriva ovaj problem, samo trebamo napraviti malo posla na našoj web stranici. Stavili smo novo ime klase na element nazvan “wf-loading” (učitavanje web fonta). Zatim u našem CSS-u izjavljujemo da je svaki selektor koji koristi prilagođeni font vidljivo skriven dok to ime klase ne nestane. Možda biste pomislili malo rizično, ali ako se font ne uspije učitati, vremensko ograničenje ionako uklanja klasu. Ovo je samo za borbu protiv FOUT zapamtite, samo malo vizualne ljepote.

Sve to radimo tako što napravimo mali Sass @mixinnazvan "prevenFOUT" i uvrstimo @includega u naše prilagođene hrpe fontova, koje su također @mixins.

To nam sada dobro ide. U konačnici u ovom dizajnu prelazimo na HF&J fontove u kojima se učitava izravno putem @ font-face, tako da u osnovi prestajemo brinuti zbog ovoga.