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.
Fonts er smĂ„ filer med stor magt over oplevelsen: de blokerer tekstens rendering, de udlĂžser layoutspring, og de hentes ofte fra tredjeparter med ekstra DNS- og forbindelsestid. Den gode nyhed: font-problemer er blandt de mest taknemmelige at lĂžse â fĂ„ beslutninger, stor og mĂ„lbar effekt.
Kontrolramme: WordPress 7.1 og PHP 8.4.23 udgĂžr versionsgrundlaget pr. 30. august 2026. Terminaleksemplet er genskabt.
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, ombrydes teksten â og fylder fallback og webfont forskelligt, rykker alt under sig: det er font-delen af CLS. MĂ„let er derfor ikke at fjerne ombytningen, men at gĂžre den hurtig og visuelt neutral.
Google Fonts-linket koster ekstra DNS-opslag og forbindelser til to fremmede domĂŠner, fĂžr fĂžrste bogstav kan tegnes â og siden cache-partitionering i browserne er der heller ingen delt cache-gevinst ved det. Lokal hosting (woff2-filerne pĂ„ dit eget domĂŠne) er hurtigere, GDPR-mĂŠssigt enklere og standard i moderne vĂŠrktĂžjer: FlyingPress og LiteSpeed Cache kan selv lokalisere Google Fonts, mange temaer har indstillingen indbygget â og hĂ„ndholdt er det blot at downloade woff2 og skrive @font-face selv. BegrĂŠns samtidig antallet: hver vĂŠgt og stil er en fil, sĂ„ to familier i 3-4 varianter i alt er et sundt mĂ„l:
font-display: swap viser teksten straks i fallback og bytter, nĂ„r webfonten er klar â det rigtige valg for brĂždtekst og overskrifter (FOIT’s usynlige tekst er vĂŠrst for oplevelsen). Preload derefter kun den fontfil, der tegner teksten over folden â typisk overskriftens vĂŠgt: <link rel="preload" as="font" type="font/woff2" crossorigin>. Preloader du alle fonte, konkurrerer de med LCP-billedet om bĂ„ndbredden â sĂ„ er du tilbage, hvor du startede. Mange cache-plugins sĂŠtter bĂ„de swap og preload for dig; tjek blot at valgene matcher.
Sidste finpuds fjerner selve springet: vĂŠlg en fallback i font-stakken, der ligner webfonten i bredde (fx Arial for en geometrisk sans), og justerĂ©r med CSS’ens size-adjust/ascent-override pĂ„ en lokal fallback-definition, sĂ„ linjehĂžjde og bredde matcher nĂŠsten 1:1. Flere optimeringsvĂŠrktĂžjer genererer de justerede fallbacks automatisk. Resultatet: swap’en sker, men Ăžjet ser kun et diskret formskift â og CLS-bidraget gĂ„r mod nul.
Fontlaget er i orden, nĂ„r NetvĂŠrk-fanen kun viser fontrequests til dit eget domĂŠne, antallet af fontfiler er encifret, teksten er synlig fra fĂžrste rendering (ingen FOIT), og CLS-mĂ„lingen ikke lĂŠngere udpeger tekstblokke som skyldige. Test pĂ„ langsom mobilforbindelse i DevTools â dĂ©r afslĂžres fontspring tydeligst. Og gentag tjekket efter temaopdateringer: temaer har det med at genindfĂžre Google Fonts-links stille og roligt.
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 vinder en veloptimeret webfont oftest.
Teknisk ja â men lokal hosting er bĂ„de hurtigere og juridisk enklere (ingen besĂžgsdata til tredjepart). NĂ„r dit vĂŠrktĂžj kan lokalisere fontene med Ă©t klik, er der sjĂŠldent grund til at lade vĂŠre.
En hel ikonfont for fem ikoner er spildt bĂ„ndbredde â og ikoner, der popper ind sent. Brug inline-SVG for de fĂ„ ikoner i stedet; det fjerner bĂ„de en fil og et fontspring.
