Webfonte er stadig den nemmeste ydelsesgevinst på de fleste sites

Mønstret, der bliver ved med at dukke op

Hvis du auditerer ti tilfældige produktionswebsites i dag, vil du finde nogenlunde den samme fontsituation på de fleste af dem:

• Seks til ti fontfiler indlæst på forsiden
• Alle i WOFF2 (godt), men uden en font-display-strategi (dårligt)
• Flere tykkelser og typografier, der ikke bruges noget sted på siden
• Hele stakken leveret fra et tredjepartsdomæne (typisk Google Fonts) med alle de DNS-, TLS- og privatlivsomkostninger, det medfører
• Ingen unicode-range-subsetting, så alle besøgende downloader kyrilliske og græske glyffer, selv hvis siden er på engelsk

Det er ikke et problem, der kun findes på små sites. Masser af velbudgetterede marketingsider indlæser stadig 600 KB fonte, før første afsnit kan vises. Når du først begynder at lægge mærke til mønstret, kan du ikke lade være med at se det.

Løsningen er ikke eksotisk. Den består af en håndfuld velkendte teknikker, som har været i browsere i årevis.

Brug én variabel font i stedet for seks statiske

Hvis du indlæser Inter Regular, Inter Medium, Inter SemiBold, Inter Bold og deres kursiver, downloader du omtrent seks gange flere bytes, end du behøver. En enkelt variabel Inter-font dækker hele vægtaksen (og hældning i nogle builds) i én fil, der kun er en smule større end to statiske tykkelser.

Browserunderstøttelsen har været afklaret i årevis — variable fonte virker alle steder, der betyder noget. Den tilbageværende tøven er mest nedarvet muskelhukommelse fra den statiske fontæra.

En praktisk tommelfingerregel: én variabel fontfil per skrift, per familie. Latin i én fil, kyrillisk i en anden, græsk i en tredje, indlæst betinget med unicode-range. Det er det hele.

Sæt en fornuftig font-display

Standardadfærden, mens en custom font stadig indlæses, er at vise ingenting — usynlig tekst — i op til tre sekunder. Det er den værst tænkelige standard. Brugere ser en tom side og antager, at noget er gået i stykker.

Tilføj dette til hver @font-face-regel:

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

swap viser fallback-fonten med det samme og skifter til den custom font, når den er indlæst. Brugeren kan læse siden fra millisekund nul. Prisen er et kort layoutskift, når skiftet sker, hvilket du afbøder med næste teknik.

Match dine fallback-metrics

Et glimt af ustylet tekst føles kun forstyrrende, når fallback-fonten og den custom font har meget forskellige metrics. Moderne CSS løser dette med size-adjust, ascent-override og venner:

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

Med afstemte fallback-metrics er skiftet knap nok synligt — ordene optager den samme vandrette plads før og efter, at den custom font ankommer.

Googles arbejde med --allow-fallback-font-metrics er nu baseline browserunderstøttelse, og der findes en værktøjskæde (fontaine-biblioteket og lignende), som beregner de rigtige tal for dig på få sekunder.

Host selv

Google Fonts er bekvemt, gratis og medfører to reelle omkostninger:

1. Et ekstra TLS-handshake. Selv med HTTP/3 og connection coalescing er et ekstra origin sjældent gratis.
2. Et spørgsmål om privatliv og compliance. Flere europæiske domstole har afgjort, at indlæsning af Google Fonts fra fonts.gstatic.com udgør overførsel af persondata (IP-adressen) til en tredjepart. Selvhosting fjerner spørgsmålet helt.

Download-og-host-pipelinen er:

1. Hent WOFF2-filen (variabelt build, hvis det findes)
2. Subset den til de skrifter, dit publikum faktisk bruger
3. Servér den fra samme origin som resten af dit site, med en lang Cache-Control: max-age=31536000, immutable
4. Preload den vigtigste tykkelse: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Det er hele pipelinen. Det tager en eftermiddag for et eksisterende site, og du går næsten aldrig tilbage.

Hvornår du helt bør springe custom fonte over

Det er værd at sige højt: Ikke alle sites har brug for en custom font. Systemfontstakken er nu reelt smuk på alle operativsystemer:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Tykkelsen er rigtig, metrics er rigtige, renderingen er tilpasset enheden, og omkostningen i bytes over netværket er præcis nul. For et værktøjssite, en intern app, en portfolio der prioriterer indhold, eller noget som helst rettet mod brugere på langsomme netværk, er systemstakken det rigtige svar.

<!-- tool-cta:start -->

💡 Prøv dette: Konvertér dine TTF- eller OTF-filer til moderne WOFF2 med brugsklar CSS ved hjælp af Webfont Generator, hvilket er det formatskift, indlægget anbefaler.

<!-- tool-cta:end -->

Den ærlige opsummering

For et typisk lille site dækker fire trin hele historien om webfont-ydeevne:

1. Én variabel font per familie per skrift
2. font-display: swap med matchede fallback-metrics
3. Selvhostet med lange cache-headere og en preload for den kritiske tykkelse
4. Eller spring fonte helt over og brug systemstakken

Gør dette én gang, og du vinder flere hundrede kilobytes tilbage fra forsiden, opnår et par hundrede millisekunders oplevet ydeevne og fjerner samtidig en tredjepartsafhængighed. Få ændringer har et bedre forhold mellem indsats og udbytte.