Kort fortalt: I @font-face { font-display: ... } vælger I strategi for første visning mens webfont-filen hentes. De fleste sites bør kende forskellen på swap, optional og det mere aggressive block, og hvordan det kobler til FOIT og FOUT.
Værdier i korte træk
- auto - browserens default; kan ligne block i mange tilfælde.
- block - kort “blank” tekst (FOIT), derefter webfont - risiko for CLS hvis metrics afviger kraftigt fra fallback.
- swap - vis fallback med det samme, skift når font er klar - kan give synlig “flash”, men tekst er læsbar tidligt.
- fallback - kort skjult vindue, derefter adfærd der ligner swap; kompromis mellem block og swap.
- optional - brug webfont hvis den når frem hurtigt; ellers behold fallback for sessionen - godt til ikke-kritiske snit og til at reducere flash på langsomme net.
Anbefalet praktisk linje
Brug swap til brødtekst sammen med velvalgte fallback-fonte. Brug optional til sekundære eller dekorative snit hvor perfekt match ikke er kritisk. Undgå at mikse for mange forskellige font-face-regler uden kontrol - hver ekstra weight er ekstra download og parse.
Kombinér med preload af én kritisk fil hvis I har målt at det hjælper, og hold antal varianter nede - se font subsetting.
Swap, optional og CLS
swap giver synlig tekst tidligt, men når webfonten lander, kan linjehøjde og bredde ændre sig - det er klassisk CLS hvis fallback og webfont afviger meget. Afhjælp med tættere fallback-metrics og færre vægte. optional kan reducere skift fordi webfonten droppes på langsomme net - til pris for brand-konsistens.
Efter sidetype
- Landingssider med stor hero-tekst: prioriter stabile metrics +
swapeller kontrolleretfallback; mål CLS i felt. - App-lignende UI: undgå
blockpå mobil uden test; overvejoptionaltil dekorative overskrifter.
Forhold til FOIT/FOUT
font-display er det primære værktøj til at styre om I primært accepterer usynlig tekst (FOIT-lignende) eller synlig fallback med senere skift (FOUT). I kan ikke undgå alle kompromiser; I vælger hvilken ulempe brugeren ser, og I kan udjævne med subsetting og metric-justering.
Typiske fejl
- Samme
blockoveralt uden at teste mobil - FOIT føles længere på langsomme forbindelser. - Mange weights og widths “fordi designfilen sagde det” - hver variant koster bytes og CPU.
- Ingen fallback der ligner jeres webfont - større visuelt hop og mere CLS når
swapskifter.
Relaterede begreber
FAQ
Er swap altid det rigtige valg?
For de fleste brødtekst-scenarier er swap et godt udgangspunkt: tekst vises med det samme. Til streng brand-typografi på små flader kan optional eller mere kontrolleret subsetting og preload være bedre end lange usynlige perioder eller block.
Kan font-display alene fixe dårlig LCP?
Sjældent. LCP afhænger også af filstørrelse, antal round-trips, render-blocking CSS og om teksten overhovedet er LCP-elementet. font-display styrer først og fremmest synlighed og skift - ikke total downloadtid.
Hvad betyder optional i praksis for brugeren?
Browseren kan vælge at beholde fallback hvis webfonten ikke når frem inden for et kort vindue - mindre flash, men I mister muligvis webfonten på langsomme net. Godt til ikke-kritiske snit.
Hvordan forholder block sig til FOIT?
block giver typisk en kort periode med usynlig tekst (FOIT-lignende adfærd) før webfont vises. Det kan føles hårdt på mobil; brug kun hvor I bevidst accepterer den oplevelse.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.
Optimer cookie banner uden CLS og INP problemer
Lær hvordan du bygger eller justerer cookie bannere, så de ikke skubber indhold, blokerer interaktion eller gør siden tungere end nødvendigt.
Fix CLS: sådan gør du layout stabilt uden hop i indholdet
Lær hvordan du reducerer CLS med faste dimensioner, aspect ratio, stabile embeds og korrekt font loading, så siden ikke hopper under indlæsning.
Fonts uden CLS: undgå layout hop fra webfonts og fallback fonts
Se hvordan font-display, preload, fallback fonts og font metrics påvirker CLS, og lær hvordan du gør tekst stabil fra første visning.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
