Zie met een tijdlijnsimulator wat elke font-display-waarde doet, en gebruik daarna preload, preconnect, subsets met unicode-range en aangepaste fallback-metrics om layout shift te stoppen.
Snel lettertypen laden komt neer op vier stappen: vertel de browser vroeg over het lettertype (preconnect of preload), stuur kleine WOFF2-bestanden met alleen de tekens die u nodig hebt, kies een font-display-waarde die bij de tekst past, en geef het fallback-lettertype dezelfde afmetingen zodat er niets verspringt. Gebruik font-display: optional wanneer het vermijden van layout shift het belangrijkst is.
font-display-waarden in één oogopslag
Waarde
Tekst tijdens het laden
Lettertype komt laat binnen
Geschikt voor
Fallback vrijwel direct
Wordt altijd omgewisseld
Lopende tekst die meteen zichtbaar moet zijn
Fallback vrijwel direct
Niet omgewisseld; fallback blijft
Minste layout shift
Fallback vrijwel direct
Alleen omgewisseld binnen ongeveer 3s
Een middenweg
Onzichtbaar tot ongeveer 3s
Wordt altijd omgewisseld
Icoonlettertypen, logo's in tekst gezet
Browser beslist
Browser beslist
Het aan de browser overlaten
Lettertypen zijn een van de weinige bronnen die uw tekst kunnen verbergen of de layout kunnen laten verschuiven. Sleep de schuifregelaar hieronder om in te stellen hoe lang een lettertype nodig heeft om binnen te komen en bekijk wat elke font-display-waarde op elk moment toont. Kopieer daarna de laadpatronen die pagina's stabiel houden.
Zet de schuifregelaar op de tijd die uw lettertype nodig heeft om te downloaden via een trage verbinding.
Lees elke rij: grijs is onzichtbare tekst, amber is het fallback-lettertype, blauw is het webfont.
Let op welke waarden laat van lettertype wisselen. Bij een late wissel springt zichtbare tekst opnieuw op zijn plaats.
Kopieer de snippets voor preload, subsets met unicode-range en aangepaste fallbacks.
Zelf gehoste lettertypen: zet de @font-face-regels inline in de head, zodat de browser ze vindt zonder op een andere stylesheet te wachten.
Preload alleen een of twee cruciale bestanden. Elke dikte preloaden concurreert met uw afbeeldingen en scripts.
Voeg altijd crossorigin toe aan een font-preload, ook voor bestanden op uw eigen domein, anders haalt de browser het bestand twee keer op.
Lever WOFF2. Het comprimeert beter dan WOFF en elke huidige browser kan het lezen.
Zet altijd een passende generieke familie aan het einde van elke font-family-lijst, zodat tekst nog steeds wordt weergegeven als de download mislukt.
Veelgestelde vragen
Wat doet font-display: swap?
Het geeft het lettertype een extreem korte blokperiode, die volgens de CSS Fonts-specificatie bij voorkeur 100ms of korter is, en een oneindige swapperiode. Tekst verschijnt vrijwel direct in het fallback-lettertype en wisselt naar het webfont zodra dat klaar is met laden.
Is font-display: swap slecht voor CLS?
Dat kan. Als de fallback en het webfont een andere breedte of regelhoogte hebben, verschuift de late wissel de tekst en de inhoud eronder. Los dat op met size-adjust en de overrides voor ascent, descent en line-gap op de fallback, of gebruik optional.
Waarom wordt mijn gepreloade lettertype twee keer gedownload?
Lettertypen worden opgehaald in anonieme CORS-modus, dus de preload-link heeft het crossorigin-attribuut nodig, zelfs als het bestand op dezelfde origin staat. Zonder dat attribuut komt de preload niet overeen met het echte verzoek en wordt het lettertype opnieuw opgehaald.
Moet ik Google Fonts preloaden?
Meestal niet. web.dev waarschuwt dat preloaden een deel van de eigen content negotiation van de browser omzeilt, waaronder unicode-range, zodat u mogelijk een subset ophaalt die de pagina nooit gebruikt. Gebruik in plaats daarvan preconnect naar fonts.googleapis.com en fonts.gstatic.com, of host zelf en preload uw eigen bestand.
Hoe bespaart unicode-range bytes?
Als een @font-face-regel een unicode-range heeft, downloadt de browser dat bestand alleen als de pagina minstens één teken uit dat bereik gebruikt. Splits een lettertype in Latijnse, Cyrillische of Griekse bestanden en elke bezoeker haalt alleen de schriften op die op de pagina staan.
De tijdlijn van font-display
Als tekst een lettertype nodig heeft dat nog niet binnen is, doorloopt de browser maximaal drie periodes. In de blokperiode zet hij de tekst op met een onzichtbare fallback. In de swapperiode toont hij de fallback en wisselt hij zodra het lettertype binnenkomt. Daarna volgt de faalperiode, waarin de fallback definitief blijft.
font-display verandert alleen hoe lang de eerste twee periodes duren. De waarden in de simulator zijn die welke het concept van CSS Fonts Level 4 aanbeveelt; browsers kunnen iets andere tijden gebruiken.
Waarom late wissels layout shift veroorzaken
Zelfs onzichtbare tekst neemt ruimte in die is gemeten met het fallback-lettertype. Wanneer het echte lettertype het vervangt, kan elke regel breder of smaller worden, zodat alinea's opnieuw afbreken en alles eronder verschuift. Die beweging telt mee in Cumulative Layout Shift.
Er zijn twee oplossingen. Vermijd de late wissel helemaal met optional, of laat de fallback dezelfde ruimte innemen als het webfont met size-adjust en de descriptors voor metric overrides op een local()-fallback.
Subsetting
Een lettertype met duizenden glyphs is verspilling voor een pagina die er honderd gebruikt. Subsettingtools halen ongebruikte tekens weg voordat u het bestand uploadt, en met unicode-range kan de browser hele bestanden overslaan die hij niet nodig heeft.
Voor een kort stuk displaytekst accepteert de Google Fonts API een text=-parameter en levert een bestand met alleen die tekens. Dat is handig voor een logo of één kop in een decoratief lettertype.
Zelf gehost lettertype met preload
Preload het ene bestand dat het eerste scherm nodig heeft
as, type en crossorigin moeten alle drie aanwezig zijn. De @font-face-regel staat inline in de head, zodat hij meteen wordt gevonden.
Bestanden splitsen met unicode-range
Latijnse en Cyrillische subsets van één familie
Beide regels delen een familienaam. Een pagina die alleen in het Engels is geschreven, downloadt het Cyrillische bestand nooit.
Een fallback met passende afmetingen
Aangepaste lokale fallback om layout shift te beperken
De getallen zijn voorbeeldwaarden: meet uw eigen lettertype ten opzichte van de fallback en stem ze af tot de twee gelijk lopen.
Google Fonts met preconnect en een subset voor één kop
De tweede stylesheet vraagt alleen de letters uit de logotekst op, waardoor dat bestand piepklein blijft.
Korte blokperiode (3s aanbevolen), oneindige swap
Extreem korte blokperiode (100ms of minder), oneindige swap
Beginweergave: het lettertype heeft 1.5 seconden nodig om te laden; sleep de schuifregelaar om dat te wijzigen. Grijs is onzichtbare tekst, amber de fallback, blauw het webfont.
Lettertype komt binnen na {n}s
Webfont niet gebruikt bij deze paginaweergave
Zichtbare wissel: tekst kan verspringen
Geen zichtbare wissel
Schaal: 0 tot 5 seconden. Met optional staat de specificatie de browser toe een late download af te breken of met zeer lage prioriteit af te maken.