Kort fortalt: Når en webfont ikke er klar ved første tekstoptegning, vælger browseren en strategi. FOIT (Flash of Invisible Text) skjuler teksten kort. FOUT (Flash of Unstyled Text) viser en fallback-font med det samme og skifter når den endelige font er klar.
font-display er jeres primære styring - se font-display.
FOIT (Flash of Invisible Text)
Brugeren ser intet eller næsten intet tekst i et kort vindue. Det kan føles “hullet” og skabe mistillid til om siden er i stykker. Til gengæld undgår I et synligt skifte mellem to snit - men I kan stadig få CLS når teksten pludselig vises med andre linjehøjder og bredder end fallback ville have givet.
FOUT (Flash of Unstyled Text)
Tekst er læsbar med det samme med system- eller fallback-font, derefter skifter udseende når webfonten er indlæst. Det kan føles uroligt, men indholdet er tilgængeligt tidligere - ofte det mindre onde for artikler, formularer og dashboards.
Hvordan minimerer I begge effekter?
- Reducer downloadtid: færre weights og stilarter, font subsetting, WOFF2, og undgå unødvendige tredjepartsfont-kæder.
- Preload den ene kritiske fontfil hvis den er på kritiske veje - se preload.
- Match fallback-metrics med
size-adjust/ascent-override(avanceret) så hop ved skift minimeres. - Overvej
font-display: optionalfor accenter hvor perfekt snit ikke er kritisk - så undgår I nogle fulde loads til fordel for stabil tekst.
Forhold til Core Web Vitals
- LCP kan være tekst - så font-hastighed er direkte relevant.
- CLS påvirkes af om tekstblokke skifter højde ved fontskift.
- INP påvirkes sjældent direkte af FOIT/FOUT, men tung font-pipeline kan stadig belaste main thread i andre dele af siden.
Relaterede begreber
- font-display
- preload
- CLS
- render-blocking CSS der forsinker første visning
FAQ
Hvilken strategi er bedst for SEO - FOIT eller FOUT?
Google belønner ikke én frem for den anden direkte. Det der tæller er brugeroplevelse og målbare signaler som LCP, INP og CLS. Vælg en fontstrategi der giver stabil layout og hurtig læsbar tekst - typisk med tydelig fallback og begrænset antal fontfiler.
Kan FOIT eller FOUT give CLS?
Ja. Hvis tekst pludselig vises eller skifter metrik når webfonten lander, kan layout hoppe. Brug font-display bevidst, begræns weights og overvej at matche fallback med size-adjust/ascent-override for mindre hop.
Er FOUT altid mindre slemt end FOIT?
For informationsindhold er læsbar tekst med det samme ofte at foretrække før et kort typografisk skifte. For brand-kritiske designs kan FOUT føles uroligt - så kombinerer I subsetting, preload og færre snit i stedet for at skjule tekst.
Adskiller mobil og desktop sig?
Ja. Langsommere net og svagere CPU forstærker ventetid og flash. Test på throttled 4G og rigtige mobilenheder - ikke kun desktop lab.
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.
