font-display er en deskriptor i en CSS-regel med @font-face. Den bestemmer, hvad browseren gør med tekst, mens den tilhørende webfont hentes. Uden en passende strategi kan browseren holde tekst usynlig i en periode — kendt som FOIT, Flash of Invisible Text — eller vise en fallback-font og senere bytte til den rigtige skrifttype.

Det er vigtigt for både læsbarhed og hastighedsoplevelse. En besøgende bør kunne læse navigation, overskrift og brødtekst, selv hvis en fontfil er forsinket på mobilnet. Derfor hænger font-display tæt sammen med anbefalingen Ensure text remains visible during webfont load.

De vigtigste værdier

font-display: swap viser fallback-teksten straks og erstatter den, når webfonten er klar. Det er ofte det mest robuste valg for indholdssider. block tillader en kort blokering af teksten og er sjældent passende til almindelig brødtekst. fallback har en kort blokering og en begrænset bytteperiode, mens optional giver browseren større frihed til at undlade en langsom font på svage forbindelser.

Ingen værdi er universelt rigtig. På en brandtung landing page kan designet tale for en anden afvejning, men usynlig tekst bør være undtagelsen. swap giver til gengæld potentielt FOUT, Flash of Unstyled Text, hvor skrifttypen ændres efter første paint.

Betydning for speed og Core Web Vitals

Synlig tekst gør den første rendering mere brugbar og kan forbedre den oplevede FCP. Hvis hero-overskriften er et betydeligt LCP-element, kan fontens indlæsning også påvirke LCP. Et efterfølgende fontbytte kan dog flytte linjebrud og elementhøjder. Det kan give layoutskift, især når fallback-fontens tegnbredde afviger meget fra webfontens.

Brug derfor CSS-font metrics som size-adjust, ascent-override og descent-override, når et fontskift skaber synlige hop. Det er mere præcist end blot at ændre font-display-værdien.

WordPress: sådan gør du

Mange temaer og page builders indlæser flere Google Fonts-vægte og stilarter globalt. Begræns først antallet: brug kun de familier, vægte og tegnsæt, som designet faktisk anvender. Lokal hosting giver bedre kontrol over cache, filnavne og privatliv, men kræver stadig korrekt @font-face-opsætning.

  • Angiv font-display: swap eller et bevidst alternativ i hver fontregel.
  • Host WOFF2-filer lokalt, og brug moderne filformater.
  • Preload kun den ene fontfil, der er nødvendig i første skærm.
  • Kontrollér, at samme fil ikke både preloads og hentes igen med en anden URL eller CORS-indstilling.

Sådan måler du resultatet

Test med DevTools Network sat til langsomt mobilnet og slå cache fra. Se, om teksten er læsbar før fontfilen afsluttes, og optag en Performance-trace for at finde layoutskift omkring fontbyttet. Kontrollér også reelle sidetyper — ikke kun forsiden. Målet er ikke nødvendigvis, at fonten aldrig byttes, men at indholdet er læsbart uden uventede hop.