Webfonter er fortsatt den enkleste ytelsesgevinsten på de fleste nettsteder

Mønsteret som stadig dukker opp

Hvis du gjennomgår ti tilfeldige produksjonsnettsteder i dag, vil du finne omtrent den samme fontsituasjonen på de fleste av dem:

• Seks til ti fontfiler lastet på forsiden
• Alle i WOFF2 (bra), men uten noen font-display-strategi (dårlig)
• Flere vekter og stiler som ikke brukes noe sted på siden
• Hele stacken levert fra et tredjepartsdomene (Google Fonts, vanligvis), med all DNS-, TLS- og personvernkostnaden det innebærer
• Ingen unicode-range-subsetting, så hver besøkende laster ned kyrilliske og greske glyfer selv om siden er på engelsk

Dette er ikke et problem som bare gjelder små nettsteder. Mange godt finansierte markedsføringssider laster fortsatt 600 KB med fonter før første avsnitt kan vises. Når du først begynner å legge merke til mønsteret, kan du ikke overse det.

Løsningen er ikke eksotisk. Den består av en håndfull velkjente teknikker som har vært i nettlesere i årevis.

Bruk én variabel font i stedet for seks statiske

Hvis du laster Inter Regular, Inter Medium, Inter SemiBold, Inter Bold og kursivvariantene deres, laster du ned omtrent seks ganger flere bytes enn du trenger. Én enkelt variabel Inter-font dekker hele vektaksen (og helling, i noen bygg) i én fil som knapt er større enn to statiske vekter.

Nettleserstøtten har vært avklart i flere år — variable fonter fungerer overalt det betyr noe. Den gjenværende nølingen er for det meste nedarvet muskelminne fra den statiske fontæraen.

En praktisk tommelfingerregel: én variabel fontfil per skriftsystem, per familie. Latin i én fil, kyrillisk i en annen, gresk i en tredje, lastet betinget med unicode-range. Det er alt.

Sett en fornuftig font-display

Standardoppførselen når en tilpasset font fortsatt lastes, er å vise ingenting — usynlig tekst — i opptil tre sekunder. Dette er verst mulig standard. Brukere ser en tom side og antar at noe er ødelagt.

Legg dette til i 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 umiddelbart og bytter inn den tilpassede fonten når den er lastet. Brukeren kan lese siden fra millisekund null. Avveiningen er et kort layoutskift når byttet skjer, noe du demper med neste teknikk.

Match fallback-metrikken

Et glimt av ustylet tekst føles bare forstyrrende når fallback-fonten og den tilpassede fonten har svært ulik metrikk. Moderne CSS løser dette med size-adjust, ascent-override og beslektede egenskaper:

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

Med justert fallback-metrikk er byttet knapt merkbart — ord opptar den samme horisontale plassen før og etter at den tilpassede fonten kommer på plass.

Google sitt --allow-fallback-font-metrics-arbeid støttes nå som standard i nettlesere, og det finnes en verktøykjede (biblioteket fontaine og lignende) som beregner de riktige tallene for deg på sekunder.

Drift fontene selv

Google Fonts er praktisk, gratis, og medfører to reelle kostnader:

1. Et ekstra TLS-håndtrykk. Selv med HTTP/3 og connection coalescing er en ekstra origin sjelden gratis.
2. Et personvern- og etterlevelsesspørsmål. Flere europeiske domstoler har slått fast at lasting av Google Fonts fra fonts.gstatic.com utgjør overføring av personopplysninger (IP-adressen) til en tredjepart. Egen hosting fjerner spørsmålet helt.

Nedlastings- og hostingsløpet er:

1. Hent WOFF2-filen (variabelt bygg hvis det finnes)
2. Subsett den til skriftsystemene målgruppen din faktisk bruker
3. Lever den fra samme origin som resten av nettstedet ditt, med en lang Cache-Control: max-age=31536000, immutable
4. Preload den mest kritiske vekten: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Det er hele løpet. Det tar en ettermiddag for et eksisterende nettsted, og du går nesten aldri tilbake.

Når du bør droppe tilpassede fonter helt

Det er verdt å si høyt: ikke alle nettsteder trenger en tilpasset font. Systemfont-stacken er nå genuint vakker på alle operativsystemer:

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

Vekten er riktig, metrikken er riktig, rendering er finjustert for enheten, og kostnaden i bytes over nettverket er nøyaktig null. For et verktøynettsted, en intern app, en portefølje som prioriterer innhold, eller noe som retter seg mot brukere på trege nettverk, er systemstacken det riktige svaret.

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

💡 Prøv dette: Konverter TTF- eller OTF-filene dine til moderne WOFF2 med bruksklar CSS ved hjelp av Webfont Generator, som er formatbyttet innlegget anbefaler.

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

Den ærlige oppsummeringen

For et typisk lite nettsted dekker fire steg hele ytelseshistorien for webfonter:

1. Én variabel font per familie per skriftsystem
2. font-display: swap med matchet fallback-metrikk
3. Egen hosting med lange cache-headere og en preload for den kritiske vekten
4. Eller dropp fonter helt og bruk systemstacken

Gjør dette én gang, så henter du tilbake flere hundre kilobytes fra forsiden, vinner noen hundre millisekunder i opplevd ytelse, og fjerner samtidig en tredjepartsavhengighet. Få endringer har et bedre forhold mellom innsats og gevinst.