Tijd voor een nieuwe pairing-screencast! Deze keer heb ik Zach Leatherman aan, van Filament Group. Zach heeft de afgelopen jaren veel onderzoek gedaan, geschreven en gesproken over het laden van weblettertypen. Hij heeft er een uitgebreide gids over!
Er zijn enkele problemen met de standaard manier waarop aangepaste lettertypen worden geladen. Zoals in, gewoon een lettertype in sommige CSS koppelen via @ font-face. Zelfs de manier waarop Google Fonts je voorziet om hun lettertypen te gebruiken, noemt Zach een antipatroon (uiteindelijk is het gewoon vanilla @ font-face). Verschillende browsers doen verschillende dingen met @ font-face. Sommige versies van Safari maken bijvoorbeeld een lettertype dat is ingesteld in een aangepast lettertype onzichtbaar totdat het lettertype wordt geladen, maar heeft geen time-out, dus als het lettertype om welke reden dan ook mislukt, zou je in het ultieme worstcasescenario kunnen verkeren: voor altijd onzichtbare tekst aan de site.
Je hebt niet veel controle over hoe @ font-face fonts worden geladen, tenzij je het heft in eigen handen neemt. Dat betekent dingen als: het lettertype inlinen, het lettertype onderverdelen (ofwel met een 'kritieke' set glyphs, of op zijn minst glyphs reduceren tot de gebruikte taal), lettertypeladers gebruiken om te bepalen wanneer de lettertypen worden geladen en klassen wijzigen om ze te gebruiken . Dat laatste is bijzonder interessant. Wanneer u controle uitoefent over het laden van lettertypen, heeft u niet alleen te maken met wanneer / hoe de browser de CSS laadt die het @ font-face bevat, maar ook wanneer / hoe de browser tekstelementen tegenkomt die worden verteld om die lettertypen te gebruiken. Lettertypen die niet worden gebruikt, worden niet gedownload. Dus soms is de procedure om ze te dwingen te downloaden, te wachten tot ze zijn gedownload en vervolgens klassen toe te passen om ze daadwerkelijk te gebruiken.
Enkele tools die we hebben bekeken:
- Firefox DevTools was beter voor het kijken naar gebruikte lettertypen
- Subsetting van lettertypen kan worden gedaan in de Font Squirrel-generator of Font Prep.
- Welke tekens onderverdeelt u? Test wat je nodig hebt op bepaalde URL's met Glyphhanger.
- Hoe weet u of de browser nep vet / cursief gebruikt? faux pas.