Sidehastighed 13 min læsning

Fontoptimering i 2026: Komplet guide til hurtigere web-fonts og bedre Core Web Vitals

Web-fonts påvirker direkte din LCP og CLS. Lær at optimere fonts i 2026 med WOFF2, font-display, subsetting, preloading og metric overrides — med praktiske kodeeksempler og en komplet tjekliste.

Editorial Team

Hvorfor fontoptimering er afgørende for din sides hastighed

Web-fonts er en af de mest oversete performance-syndere derude. De påvirker direkte både LCP (Largest Contentful Paint) og CLS (Cumulative Layout Shift) — to af de tre Core Web Vitals, som Google bruger til at vurdere din sides brugeroplevelse. Har du læst vores guides til LCP-optimering og CLS-optimering, ved du allerede, hvor vigtige de metrikker er. Men det, mange overser, er at uoptimerede fonts kan sabotere selv den mest gennemtænkte performance-strategi.

Her er den barske sandhed: en typisk webside loader 3–5 fontfiler, der tilsammen vejer 200–500 KB. Og hvis de hentes fra en ekstern tjeneste som Google Fonts? Så tilføjes DNS-opslag, TLS-handshakes og en ekstra forbindelse oveni. Resultatet er forsinket tekstrendering, layout-spring og frustrerede brugere.

Så lad os dykke ned i det. I denne guide gennemgår vi alt, du behøver at vide om fontoptimering i 2026 — fra det rette filformat til avancerede CSS-teknikker, der eliminerer layout shifts fra font-swapping.

WOFF2: Det eneste format du har brug for

Lad os starte med det enkle: I 2026 er WOFF2 (Web Open Font Format 2.0) det eneste fontformat, du reelt behøver at tænke over. Det bruger Brotli-komprimering og leverer omkring 30% bedre komprimering end WOFF1, som stadig kører med gzip.

For at sætte det i perspektiv: Montserrat-fonten vejer 225 KB som TTF, 94 KB som WOFF og kun 83 KB som WOFF2. SVG-fontformatet? Hele 1,8 MB. Forskellen er ærligt talt dramatisk.

Browsersupporten er universel — alle moderne browsere understøtter WOFF2. Du kan trygt droppe alt andet:

@font-face {
  font-family: 'MinFont';
  src: url('/fonts/min-font-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Bemærk, at vi kun angiver ét format. Ingen fallback til WOFF, TTF eller EOT. Det er 2026 — vi har simpelthen ikke brug for det længere.

Self-hosting vs. Google Fonts

Okay, lad os tale om elefanten i rummet: Google Fonts. Det er utrolig nemt at bruge — kopiér en linje HTML, og du har en flot font. Men der er to væsentlige problemer, som mange ignorerer.

Performance-problemet

Når du bruger Google Fonts, sker der faktisk en hel del bag kulisserne:

  1. Browseren parser dit HTML-dokument og finder <link>-tagget til Google Fonts
  2. DNS-opslag til fonts.googleapis.com
  3. Download af en CSS-fil med @font-face-deklarationer
  4. DNS-opslag til fonts.gstatic.com (en helt anden server)
  5. Download af de faktiske fontfiler

Det er to ekstra DNS-opslag og to ekstra forbindelser, som alle blokerer for tekstrendering. Selvom du bruger preconnect, er det stadig langsommere end at hoste fontene selv.

GDPR-problemet

I 2022 afgjorde tyske domstole, at brug af Google Fonts uden samtykke overtræder GDPR, fordi CDN-anmodningerne overfører brugerens IP-adresse til Googles servere. For europæiske websites — og det inkluderer naturligvis danske — er self-hosting den juridisk sikre løsning. Det er ikke bare en anbefaling; det er nærmest et krav.

Sådan migrerer du til self-hosting

Den gode nyhed? Migreringen er overraskende enkel:

  1. Download dine fonts i WOFF2-format fra Google Webfonts Helper eller direkte fra Google Fonts
  2. Placer filerne i en /fonts/-mappe på din server
  3. Opret dine egne @font-face-deklarationer
  4. Fjern <link>-tagget til Google Fonts
/* Før: Google Fonts via CDN */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700" rel="stylesheet"> */

/* Efter: Self-hosted WOFF2 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-v18-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-v18-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-v18-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Husk at sætte korrekte cache-headers på dine fontfiler. Fonts ændrer sig stort set aldrig, så en lang cache-levetid er helt fint — faktisk anbefalet:

# Nginx: Cache fonts i 1 år
location /fonts/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header Access-Control-Allow-Origin "*";
}

font-display: Kontrollér, hvordan fonts indlæses

font-display-deskriptoren i @font-face styrer, hvad browseren gør, mens den venter på at en web-font bliver downloadet. Det er en af de vigtigste indstillinger for fontperformance, og den har direkte indflydelse på både LCP og CLS.

Lad os kigge på de vigtigste værdier.

De vigtigste værdier

  • font-display: swap — Viser tekst øjeblikkeligt med en system-font og bytter til web-fonten, når den er klar. Ingen usynlig tekst (ingen FOIT). Kan dog forårsage et kort "flash of unstyled text" (FOUT), som potentielt påvirker CLS.
  • font-display: optional — Giver browseren et meget kort vindue (typisk ~100ms) til at indlæse fonten. Hvis den ikke er klar i tide, bruges system-fonten for resten af sidevisningen, og web-fonten caches til næste besøg. Ingen layout shift overhovedet.
  • font-display: fallback — En mellemvej: kort blokeringsperiode (~100ms), derefter en swap-periode på ~3 sekunder. Ganske afbalanceret.
  • font-display: block — Skjuler tekst i op til 3 sekunder, mens fonten downloades. Brug kun dette til ikon-fonts, hvor fallback-teksten ville være meningsløs.

Hvilken skal du vælge?

For de fleste websites er den bedste strategi en kombination af begge tilgange:

/* Overskriftsfont: swap er fint — vigtigt at brandet vises */
@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand-font.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* Brødtekstfont: optional undgår layout shifts */
@font-face {
  font-family: 'BodyFont';
  src: url('/fonts/body-font.woff2') format('woff2');
  font-weight: 400;
  font-display: optional;
}

Brug swap til overskrifter og branding-elementer, hvor den visuelle identitet virkelig betyder noget. Brug optional til brødtekst, hvor stabilitet og læsbarhed er vigtigere end det præcise skrifttypevalg. Det er en simpel opdeling, men den virker overraskende godt i praksis.

Font-subsetting: Fjern det du ikke bruger

De fleste fonts indeholder tusindvis af glyffer — latinske, kyrilliske, græske, matematiske symboler og meget mere. Hvis dit website udelukkende bruger latinske tegn (plus vores danske specialtegn som æ, ø og å), downloader dine brugere hundredvis af kilobytes helt unødvendigt.

Løsningen hedder subsetting: at trimme fonten ned til kun de tegn, du rent faktisk bruger. Det lyder måske nørdet, men effekten er markant.

Unicode-range subsetting med CSS

Den simpleste tilgang er at bruge unicode-range i din @font-face-deklaration:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  /* Kun latinske tegn inkl. danske æ, ø, å */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153,
                 U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+00C6, U+00E6, U+00D8, U+00F8,
                 U+00C5, U+00E5, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

Med unicode-range downloader browseren kun fontfilen, hvis siden faktisk bruger tegn inden for det angivne interval. Det er smart, automatisk — og kræver nul ekstra arbejde fra din side.

Byg dine egne subsets med glyphhanger

For maksimal kontrol kan du bruge værktøjet glyphhanger til at analysere dit website og generere et perfekt subset:

# Installer glyphhanger
npm install -g glyphhanger

# Analysér hvilke tegn dit website bruger
glyphhanger https://ditwebsite.dk --formats=woff2

# Generer et subset baseret på analysen
glyphhanger --whitelist="U+0000-00FF,U+00C6,U+00E6,U+00D8,U+00F8,U+00C5,U+00E5" \
  --subset=Inter-Regular.ttf --formats=woff2

Resultatet kan være ret vildt. En fuld Inter-font på 100 KB kan reduceres til under 30 KB med et latin-subset. Det er en reduktion på over 70% — og det mærker dine brugere.

Preloading: Giv browseren et forspring

Normalt opdager browseren først dine fontfiler, når den har parset dit CSS. Det er sent. Med <link rel="preload"> kan du bede browseren om at begynde at downloade fontene allerede under HTML-parsingen:

<!-- Preload kun de mest kritiske fonts — typisk 1-2 stk. -->
<link rel="preload"
      href="/fonts/inter-latin-400.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

<link rel="preload"
      href="/fonts/inter-latin-700.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

Vigtigt: crossorigin-attributten er påkrævet for fonts — selv når de er self-hosted. Uden den ignorerer browseren simpelthen preload-hintet. Det er ærligt talt en af de mest almindelige fejl, vi ser folk lave.

En case study viste, at preloading af den primære font forbedrede LCP fra 1,82 sekunder til 1,24 sekunder — en forbedring på 32%. Det er virkelig mærkbart.

Men vær forsigtig: preloader du for mange fonts, stjæler du båndbredde fra andre kritiske ressourcer. Hold dig til 1–2 fonts maksimalt.

Eliminér CLS fra font-swapping med metric overrides

Det mest irriterende ved font-display: swap er det layout shift, der opstår, når web-fonten erstatter system-fonten. Teksten "hopper", fordi de to fonts har forskellige dimensioner — forskellig x-højde, ascent, descent og linjehøjde. Det kan virke som en bagatel, men det akkumulerer hurtigt i din CLS-score.

I 2026 har vi heldigvis CSS-værktøjer til at løse det. Med size-adjust, ascent-override, descent-override og line-gap-override kan du definere en fallback-font, der matcher din web-fonts dimensioner næsten perfekt.

/* Definer en justeret fallback-font */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* Brug fallback-fonten i din font-stack */
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

Med denne teknik matcher Arial (system-fonten) næsten præcis Inter's dimensioner. Når Inter er loadet og swapper ind, sker der praktisk talt intet layout shift. Det er ret elegant, faktisk.

Browsersupport for metric overrides

Her er den aktuelle status i 2026:

  • size-adjust: Understøttet i Chrome 92+, Firefox 92+ og Safari. Fuld support — ingen bekymringer her.
  • ascent-override, descent-override, line-gap-override: Understøttet i Chrome 87+ og Firefox 89+. Ikke understøttet i Safari.

Safari's manglende support er lidt ærgerlig, men i praksis betyder det blot, at Safari-brugere kan opleve et lille layout shift ved font-swap — præcis som de gør i dag. Chrome og Firefox (som tilsammen dækker over 75% af markedet) får den forbedrede oplevelse, og det er trods alt de fleste.

Automatisér med værktøjer

Du behøver heldigvis ikke at gætte på de rigtige værdier. Flere værktøjer kan beregne dem automatisk:

  • Fallback Font Generator (screenspan.net/fallback) — Upload din font og få CSS med de korrekte override-værdier. Nemt og hurtigt.
  • Next.js next/font — Genererer automatisk font metric overrides og size-adjust med nul CLS som resultat
  • Nuxt fontaine — Tilsvarende løsning til Nuxt 3+
  • @capsizecss/core — Programmatisk beregning af font-metrikker, hvis du foretrækker at bygge det selv

Reducer antallet af font-varianter

Hver ekstra font-vægt og -stil er en separat fil, browseren skal downloade. Det lyder banalt, men det er ærligt talt en af de mest effektive optimeringer: brug færre font-varianter.

Spørg dig selv:

  • Har du virkelig brug for både regular, medium, semibold og bold? Ofte kan du nøjes med regular (400) og bold (700).
  • Bruger du italic? Hvis ikke, lad være med at indlæse den.
  • Har du brug for en separat font til overskrifter, eller kan du bruge den samme i en tungere vægt?

En god tommelfingerregel: hold dig til maksimalt 3–4 fontfiler i alt. Det inkluderer alle vægte og stilarter. Færre filer, hurtigere side — det er virkelig så simpelt.

Variable fonts: Én fil til mange vægte

Hvis du rent faktisk har brug for flere vægte, kan variable fonts være en genial løsning. En variabel font indeholder hele vægtspektret (f.eks. 100–900) i en enkelt fil. Det er typisk 40–60% mindre end de tilsvarende separate filer tilsammen.

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Brug enhver vægt frit */
h1 { font-weight: 750; }
h2 { font-weight: 650; }
p  { font-weight: 400; }
strong { font-weight: 600; }

Med en variabel font downloader browseren kun én fil, og du får fuld fleksibilitet til at bruge præcis den vægt, der passer — inklusiv vægte som 750 eller 650, der slet ikke eksisterer som separate filer. Det åbner op for en helt anden typografisk frihed.

Inline kritisk @font-face i <head>

En ofte overset optimering (og en af mine personlige favoritter) er at placere dine @font-face-deklarationer direkte i et <style>-tag i <head> i stedet for i en ekstern CSS-fil. Årsagen er simpel: browseren opdager fontene hurtigere, fordi den ikke behøver at vente på at en ekstern stylesheet downloades og parses.

<head>
  <!-- Preload den vigtigste font -->
  <link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Inline @font-face for hurtigere font-discovery -->
  <style>
    @font-face {
      font-family: 'Inter';
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: 'Inter';
      src: url('/fonts/inter-700.woff2') format('woff2');
      font-weight: 700;
      font-display: swap;
    }
  </style>
</head>

Denne kombination af preload og inline @font-face giver browseren den tidligst mulige start på font-download. Det er ganske enkelt den hurtigste måde at levere web-fonts på.

Komplet tjekliste for fontoptimering

Her er din handlingsplan, prioriteret efter effekt:

  1. Konvertér til WOFF2 — Drop alle andre formater. Seriøst, alle.
  2. Self-host dine fonts — Eliminér tredjepartsforbindelser og overhold GDPR
  3. Brug font-display: swap (overskrifter) og optional (brødtekst)
  4. Preload 1–2 kritiske fonts med <link rel="preload">
  5. Subset dine fonts — Fjern ubrugte tegn med unicode-range eller glyphhanger
  6. Overvej variable fonts — Én fil i stedet for 3–5 separate filer
  7. Tilføj font metric overrides — Eliminér CLS fra font-swapping
  8. Inline @font-face i <head> — Hurtigere font-discovery
  9. Begræns antallet af varianter — Maks 3–4 fontfiler i alt
  10. Sæt cache-headers — Cache-Control: public, immutable med lang levetid

Ofte stillede spørgsmål

Hvad er forskellen på font-display: swap og font-display: optional?

font-display: swap viser tekst øjeblikkeligt med en system-font og bytter til web-fonten, når den er klar — uanset hvor lang tid det tager. Det kan forårsage et synligt "flash" og potentielt et layout shift. font-display: optional giver browseren et meget kort vindue (~100ms) til at indlæse fonten. Lykkes det ikke, bruges system-fonten for hele sidevisningen, og web-fonten caches til næste besøg. Optional giver nul layout shift, men web-fonten vises muligvis ikke ved første besøg.

Er det bedre at self-hoste fonts end at bruge Google Fonts?

Ja, i næsten alle tilfælde. Self-hosting eliminerer to ekstra DNS-opslag og tredjepartsforbindelser, hvilket typisk forbedrer FCP og LCP mærkbart. Derudover undgår du GDPR-problemer, da brugerens IP-adresse ikke deles med Google. Den eneste undtagelse er, hvis din server er langsommere end Googles CDN — men bruger du selv en CDN (og det bør du), er self-hosting næsten altid hurtigere.

Hvor meget kan font-subsetting reducere filstørrelsen?

Subsetting kan reducere fontfiler med 50–70% eller mere. En fuld Inter-font med alle glyffsæt kan veje 100 KB, mens et latin-subset med danske tegn typisk fylder under 30 KB. Jo færre sprogspecifikke tegnsæt du har brug for, desto mere kan du spare.

Hvad er en variabel font, og hvornår skal jeg bruge den?

En variabel font er en enkelt fontfil, der indeholder hele vægtspektret (f.eks. 100–900) og eventuelt flere stilarter. Den er typisk 40–60% mindre end de tilsvarende separate filer tilsammen. Brug en variabel font, når du har brug for mere end 2–3 forskellige vægte af den samme skrifttype. Har du kun brug for regular og bold, er separate WOFF2-filer ofte den simpleste løsning.

Hvordan påvirker web-fonts LCP og CLS?

Web-fonts påvirker LCP, fordi browseren ikke kan rendere tekst, før fonten er indlæst (med font-display: block) eller midlertidigt viser en fallback (med swap). Hvis tekst er det største element på siden, forsinker langsomme fonts LCP direkte. CLS påvirkes, når browseren bytter fra fallback-fonten til web-fonten, og de to fonts har forskellige dimensioner — teksten "hopper" og skubber andet indhold. Font metric overrides (size-adjust, ascent-override) kan eliminere denne effekt næsten fuldstændigt.

Om Forfatteren Editorial Team

Our team of expert writers and editors.

Relaterede Artikler