Pidämme pienen tauon etsinnässä ratkaistaksemme pienen nigling-ongelman.
"FOUT" on "tyylittömän tekstin salama". Tämä on ilmiö, jossa @ font-face -fontit latautuvat vähän, joten näet varakirjasimen ennen mukautettua kirjasinta. Normaalisti tämä ei ole ongelma Typekitissä. Eikä se todellakaan ole ongelma nykyaikaisissa selaimissa nykyään (paitsi IE 9). Se on kuitenkin meille ongelma, koska olemme nimenomaan päättäneet ladata Typekit JavaScriptin asynkronisesti.
Toivoa ei kuitenkaan menetetä, Typekitillä on tämä ongelma, mutta meidän on vain tehtävä töitä sivustollamme. Lisäsimme uuden luokan nimen elementille nimeltä "wf-loading" (web-fonttien lataus). Sitten ilmoitamme CSS: ssä, että kaikki valitsimet, jotka käyttävät mukautettua kirjasinta, on selvästi piilotettu, kunnes luokan nimi häviää. Hieman riskialtista saatat ajatella, mutta jos fontti ei lataudu, on aikakatkaisu, joka poistaa luokan joka tapauksessa. Tämä on vain taistelua FOUT muistaa, vain pieni visuaalinen hienous.
Teemme kaiken tämän tekemällä pienen Sass- @mixinnimisen "preventFOUT" ja lisäämällä @includesen mukautettuihin fonttipinoihimme , jotka ovat myös @mixins.
Tämä toimii nyt meille hyvin. Lopulta tässä suunnittelussa siirrymme HF & J-kirjasimiin, jotka latautuvat suoraan @ font-face -palvelun kautta, joten lopetamme periaatteessa huolestumisen tästä.