Kort fortalt: En fuld OpenType kan være hundredvis af kilobytes. Et subset kan være en brøkdel, fordi I fjerner sprog og symboler I ikke bruger på sitet - eller opdeler i flere filer per sprog med unicode-range.
Hvordan laves subsetting i praksis?
- Build-time med værktøjer der scanner jeres CSS/HTML-strenge (glyphhanger, pyftsubset og lignende).
- Leverandører som Google Fonts lader jer vælge subset via parametre - tjek hvad der reelt leveres.
unicode-rangei@font-faceså browseren kun henter det subset der matcher aktuel tekst - effektivt når I har flere sproglige segmenter.
Gevinster
- Hurtigere første visning af tekst - relevant hvis tekst eller tekstbaseret element er tæt på LCP.
- Færre fontkilobytes der konkurrerer med hero-billeder og kritiske scripts om netværkskøen.
- Lavere databrug for mobilbrugere og mindre risiko for lange FOIT/FOUT-perioder fordi filen når frem hurtigere.
Risici og kvalitetskrav
- Glemt tegn - fx danske æøå hvis subset kun var “basic latin” → firkanter eller uventet fallback.
- Dynamisk indhold - brugere, CMS eller API kan indsætte tegn I ikke testede; subset skal dække realistiske edge cases.
- Flere sprog på samme skabelon kræver enten bredere subset eller opdelte
@font-face-regler med tydeligunicode-range.
Kobling til font-display og preload
Subsetting mindsker filstørrelse; font-display styrer hvordan tekst vises mens filen hentes; preload kan reservere den ene kritiske fil. De løser forskellige problemer og bruges bedst sammen med måling.
Mini-tjekliste før release
- Subsettet dækker alle tegn I kan få indhold med (æøå, symboler, brugernavne).
- Test på langsomt net - ser teksten acceptabel ud med
swap/optional? - Sammenlign filstørrelse før/efter i Network og tjek CLS i lab.
Relaterede begreber
FAQ
Er subsetting stadig nødvendigt med HTTP/2 og HTTP/3?
Ja. Multiplexing fjerner ikke bytes - en mindre fil er stadig hurtigere at hente og decode. Subsetting er et af de mest direkte greb til at skære fontvægt ned.
Hvad med variable fonts?
Variable fonts kan reducere antallet af filer, men filen er ikke automatisk minimal. I kan stadig subsette og bør måle total download og decode-tid.
Kan subsetting ødelægge tegn på siden?
Ja, hvis I udelader tegn som faktisk bruges - fx æøå, valutasymboler eller brugergenereret indhold. Subset skal dække alt muligt indhold, ikke kun skabelonens demo-tekst.
Hvordan hænger unicode-range sammen med subsetting?
I @font-face kan unicode-range fortælle browseren hvilket tegninterval en given fil dækker, så den kun henter det subset der matcher sidens tekst. Det kræver planlægning så opdelingen matcher jeres sprog og indhold.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Brug Transfer-Encoding (chunked) til progressiv rendering: hurtigere første visning
Lær at finde ud af om din server eller reverse proxy buffer HTML-svar, og få streaming (chunked) til at flytte første visning og LCP i den rigtige retning.
Gør hero til LCP: sådan ændrer du struktur, CSS og prioritering
Hvis LCP bliver en tilfældig paragraf i stedet for hero, får du både dårligere tal og en måling der ikke matcher brugerens første indtryk. Her er en konkret metode til at få hero (H1/billede) til at blive LCP – uden at snyde.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
Fonts uden CLS: undgå layout hop fra webfonts og fallback fonts
Se hvordan font-display, preload, fallback fonts og font metrics påvirker CLS, og lær hvordan du gør tekst stabil fra første visning.
