Webfonts uden CLS og FOUT: lokal hosting, font-display og preload

Kort svar: Webfonts giver to klassiske gener: tekst, der blinker eller skifter form (FOUT/FOIT), og layout, der hopper (CLS). Opskriften mod begge: host fontene lokalt på dit eget domæne, brug kun de varianter, du reelt anvender, sæt font-display: swap, preload den ene font, der bruges over folden – og vælg en fallback-skrifttype, der fylder omtrent det samme, så ombytningen ikke rykker layoutet.

Fagligt gennemgået: 2. oktober 2026

Fonts er små filer med stor magt over oplevelsen: de kan blokere tekstens rendering, de udløser layoutspring, og de hentes ofte fra tredjeparter med ekstra DNS-opslag og forbindelsestid. Den gode nyhed er, at fontproblemer er blandt de mest taknemmelige at løse – få beslutninger giver en stor og målbar effekt.

Guiden gennemgår, hvad der sker, når en webfont indlæses, og hvordan du i fem trin får fontlaget til at være hurtigt og visuelt roligt i WordPress.

Før du ændrer noget: Notér, hvilke fonte, vægte og stilarter sitet bruger i dag, og tag et screenshot af forsiden og en artikelside. Mål CLS og LCP før og efter. Lav ændringerne på staging, hvis du har det – en forkert font-stak kan ændre linjeskift og knapbredder overalt.

FOUT, FOIT og CLS: hvad sker der?

Mens webfonten hentes, skal browseren vælge: vis teksten i en fallback-font (FOUT – flash of unstyled text) eller skjul den (FOIT – flash of invisible text). Når webfonten så lander, tegnes teksten om – og fylder fallback og webfont forskelligt, rykker alt under sig. Det er fontdelen af CLS. Målet er derfor ikke at fjerne ombytningen, men at gøre den hurtig og visuelt neutral.

Hvordan browseren vælger, styres af CSS-egenskaben font-display i @font-face-reglen:

Værdi	Hvad sker der	Hvornår den passer
auto / block	Teksten skjules i en kort periode (typisk op til ca. 3 sekunder), før fallback vises	Sjældent – usynlig tekst er værst for oplevelsen
swap	Fallback vises straks og byttes, når webfonten er klar	Standardvalget til brødtekst og overskrifter
fallback	Meget kort usynlig periode, derefter fallback; webfonten byttes kun ind, hvis den kommer hurtigt	Når du vil begrænse sene spring
optional	Webfonten bruges kun, hvis den er klar næsten med det samme; ellers beholdes fallback	Når nul layoutspring vejer tungere end webfonten ved første besøg

1. Host fontene lokalt

Et Google Fonts-link koster ekstra DNS-opslag og forbindelser til to fremmede domæner, før første bogstav kan tegnes. Og siden browserne begyndte at partitionere deres cache pr. website, er der heller ingen delt cache-gevinst ved at hente fonten fra Google. Lokal hosting – woff2-filerne på dit eget domæne – er hurtigere og undgår, at den besøgendes IP-adresse sendes til en tredjepart. Den juridiske side er gennemgået i guiden om Google Fonts, CDN’er og persondata.

Der er flere veje til lokale fonte i WordPress:

• WordPress’ fontbibliotek: i bloktemaer kan du under Stilarter → Typografi installere fonte, herunder fra Google Fonts. WordPress henter så filerne ned og serverer dem fra dit eget domæne.
• Optimeringsplugin: FlyingPress og LiteSpeed Cache kan selv lokalisere eller optimere Google Fonts.
• Temaets indstilling: mange temaer og sidebyggere har en indbygget mulighed for lokale fonte.
• Manuelt: download woff2-filerne, læg dem i temaet eller et child-tema, og skriv selv @font-face.

Tjek licensen, når du selv hoster en font. Fonte fra Google Fonts er udgivet under åbne licenser, der tillader selvhosting, men kommercielle fonte kan have regler for webbrug og antal visninger.

2. Skær ned på varianter og tegnsæt

Hver vægt og stil er som udgangspunkt en fil for sig. To familier i tre-fire varianter i alt er et sundt mål – fx brødtekst i normal og fed samt overskrifter i én vægt. Gennemgå temaets indstillinger: mange temaer indlæser kursiv, let og ekstra fed „for en sikkerheds skyld“, selvom de aldrig bruges.

Variable fonte samler mange vægte i én fil. Bruger du tre eller flere vægte af samme familie, er én variabel fil ofte mindre end tre statiske. Bruger du kun én eller to vægte, kan de statiske filer være mindst – sammenlign filstørrelserne.

Subsetting fjerner tegn, du ikke har brug for. Til dansk er det latinske tegnsæt nok – det dækker også æ, ø og å. Kyrilliske, græske og vietnamesiske tegn kan udelades, medmindre sitet bruger dem. Med unicode-range fortæller du browseren, hvilke tegn filen dækker:

@font-face {
  font-family: "Inter";
  src: url("/wp-content/themes/mit-tema/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

3. Sæt font-display og preload den rigtige fil

font-display: swap viser teksten straks i fallback og bytter, når webfonten er klar – det rigtige valg for brødtekst og overskrifter. Preload derefter kun den fontfil, der tegner teksten over folden – typisk overskriftens vægt:

<link rel="preload" href="/wp-content/themes/mit-tema/fonts/inter-latin-600.woff2" as="font" type="font/woff2" crossorigin>

Attributten crossorigin skal med, også når fonten ligger på dit eget domæne – ellers hentes filen to gange. Preloader du alle fonte, konkurrerer de med LCP-billedet om båndbredden, og så er du tilbage, hvor du startede. Mange cache-plugins sætter både swap og preload for dig; tjek blot, at valgene passer til de fonte, siden faktisk bruger over folden. Mere om prioritering står i guiden om preload, preconnect og fetchpriority.

4. Lav en fallback, der ikke hopper

Sidste finpudsning fjerner selve springet: vælg en fallback i font-stakken, der ligner webfonten i bredde (fx Arial for en neutral sans-serif), og justér den med CSS-beskrivelserne size-adjust, ascent-override, descent-override og line-gap-override på en lokal fallback-definition, så linjehøjde og bredde matcher næsten 1:1:

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body { font-family: "Inter", "Inter Fallback", Arial, sans-serif; }

Procenttallene i eksemplet er kun illustration – de rigtige værdier afhænger af den konkrete font og findes ved at sammenligne de to skrifter eller med et værktøj, der beregner dem. Flere optimeringsværktøjer genererer de justerede fallbacks automatisk. Resultatet er, at ombytningen stadig sker, men øjet ser kun et diskret formskift – og CLS-bidraget går mod nul.

Vil du helt undgå ombytningen, er font-display: optional sammen med preload et alternativ: på hurtige forbindelser bruges webfonten med det samme, og på langsomme beholder siden fallback, indtil fonten ligger i cachen ved næste sidevisning.

5. Verificér fontlaget

Fontlaget er i orden, når alle punkterne her holder:

• Netværk-fanen i DevTools viser kun fontrequests til dit eget domæne.
• Antallet af fontfiler er lavt og svarer til de varianter, sitet faktisk bruger.
• Teksten er synlig fra første rendering – ingen usynlig tekst.
• CLS-målingen udpeger ikke længere tekstblokke som årsag til layoutskift.
• Æ, ø og å vises i webfonten og ikke i fallback (et tegn på, at subsettet er for snævert).

Test med begrænset mobilforbindelse i DevTools – dér afsløres fontspring tydeligst. Gentag tjekket efter temaopdateringer: temaer og plugins har det med at genindføre Google Fonts-links stille og roligt.

Læs også

• Hub: WordPress performance og cache
• CLS i WordPress: billeder, fonts, bannere og dynamiske elementer
• Selvhostede webfonte: hurtigere og uden tredjelandsoverførsel
• Preload, preconnect og fetchpriority: prioritér det rigtige
• Google Fonts, CDN’er og persondata
• WordPress hosting hos Hostious – LiteSpeed og NVMe; pluginpakke med bl.a. FlyingPress fra WP StartUp

Ofte stillede spørgsmål om webfonts

Er systemfonte ikke bare hurtigst?

Jo – en systemfont-stak har nul download og nul spring. Prisen er identitet: skriften varierer mellem styresystemer. Til driftstunge værktøjer og intranet er det et fremragende valg; til brandbærende sites vælger de fleste en veloptimeret webfont.

Må jeg stadig bruge Google Fonts-linket?

Teknisk ja – men lokal hosting er hurtigere og undgår, at besøgendes IP-adresser sendes til en tredjepart. Når dit tema, WordPress’ fontbibliotek eller dit optimeringsplugin kan lokalisere fontene, er der sjældent grund til at lade være.

Hvad med ikonfonte?

En hel ikonfont for fem ikoner er spildt båndbredde – og ikoner, der popper ind sent. Brug inline-SVG til de få ikoner i stedet; det fjerner både en fil og et fontspring.

Er variable fonte altid bedre?

Nej. En variabel font samler mange vægte i én fil og vinder typisk, når du bruger tre eller flere vægte. Bruger du kun én eller to, kan statiske filer være mindre – sammenlign filstørrelserne, før du vælger.