Font-optimering — Webfonts, FOUT og SEO

Webfonts er noget nær universelle på moderne sites — og en hyppig kilde til performance-problemer. En webfont der hentes fra ekstern CDN, parseres og swappes ind over systemfonten kan koste 200-500ms ekstra på LCP og forårsage målbart CLS i processen. Korrekt font-optimering med WOFF2, preload og font-display er en konkret og direkte forbedring af Core Web Vitals.

WOFF2 er standarden

WOFF2 er det mest effektive webfont-format. Det komprimerer 30-50% bedre end WOFF og er understøttet af alle moderne browsere. Sørg for at dine fonte serveres som WOFF2 — det er det primære format i @font-face definitionen:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

font-display styrer swap-adfærd

font-display bestemmer hvad browseren viser mens fonten indlæses:

• swap — viser systemfont øjeblikkeligt, swapper til webfont når den er klar. FOUT, men ingen usynlig tekst.
• optional — giver fonten kort tid (100ms) til at indlæse fra cache; hvis ikke klar, bruges systemfont permanent for den session.
• block — skjuler tekst op til 3 sekunder mens fonten indlæses. Undgå.

For kritiske fonte (body font) er swap standardvalget. optional er stærkere for performance men kræver at brugeren accepterer systemfont ved første besøg.

Preload af kritiske fonte

For den primære body font og heading font er preload effektivt:

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

crossorigin er påkrævet selv for self-hosted fonte — fonte hentes med CORS-request. Uden crossorigin vil browseren hente fonten to gange.

Subsetting reducerer filstørrelse

En komplet Inter-font inkluderer tegn for alle sprog — kyrillisk, græsk, vietnamesisk. For et dansk site er langt størstedelen af disse tegn irrelevante. Subsetting fjerner ubrugte tegn og reducerer filstørrelsen dramatisk. Google Fonts genererer automatisk subsets baseret på unicode-range — self-hosted fonte kræver manuel subsetting med værktøjer som pyftsubset.

Self-hosted vs. Google Fonts

Google Fonts er populær, men kræver en ekstern request til fonts.googleapis.com. Med preconnect er det håndterbart. Self-hosted fonte eliminerer den externe afhængighed og giver fuld kontrol over caching — og er GDPR-cleanere da ingen request sendes til Google. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.