Webbtypsnitt är fortfarande den enklaste prestandavinsten på de flesta sajter

Mönstret som återkommer

Om du granskar tio slumpmässiga produktionswebbplatser i dag hittar du ungefär samma typsnittssituation på de flesta av dem:

• Sex till tio typsnittsfiler laddas på startsidan
• Alla är i WOFF2 (bra) men utan någon font-display-strategi (dåligt)
• Flera vikter och stilar används inte någonstans på sidan
• Hela stacken levereras från en tredjepartsdomän (oftast Google Fonts), med alla DNS-, TLS- och integritetskostnader det innebär
• Ingen unicode-range-uppdelning, så varje besökare laddar ner kyrilliska och grekiska glyfer även om sidan är på engelska

Det här är inte ett problem som bara finns på små sajter. Många välfinansierade marknadsföringssidor laddar fortfarande 600 KB typsnitt innan det första stycket kan renderas. När du väl börjar se mönstret går det inte att sluta se det.

Lösningen är inte exotisk. Det handlar om en handfull välkända tekniker som har funnits i webbläsare i flera år.

Använd ett variabelt typsnitt i stället för sex statiska

Om du laddar Inter Regular, Inter Medium, Inter SemiBold, Inter Bold och deras kursiva varianter laddar du ner ungefär sex gånger fler byte än du behöver. Ett enda variabelt Inter-typsnitt täcker hela viktaxeln (och lutning, i vissa byggen) i en fil som knappt är större än två statiska vikter.

Webbläsarstödet har varit avgjort i flera år — variabla typsnitt fungerar överallt där det spelar roll. Den kvarvarande tvekan är mest nedärvt muskelminne från eran med statiska typsnitt.

En praktisk tumregel: en variabel typsnittsfil per skriftsystem, per familj. Latin i en fil, kyrilliska i en annan, grekiska i en tredje, laddade villkorligt med unicode-range. Det är allt.

Sätt ett rimligt font-display

Standardbeteendet när ett anpassat typsnitt fortfarande laddas är att visa ingenting — osynlig text — i upp till tre sekunder. Det är sämsta möjliga standard. Användare ser en tom sida och antar att något är trasigt.

Lägg till detta i varje @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 visar fallback-typsnittet direkt och byter till det anpassade typsnittet när det har laddats. Användaren kan läsa sidan från millisekund noll. Nackdelen är en kort layoutförskjutning när bytet sker, vilket du mildrar med nästa teknik.

Matcha dina fallback-mått

En flash av ostylad text känns bara störande när fallback-typsnittet och det anpassade typsnittet har mycket olika mått. Modern CSS löser detta med size-adjust, ascent-override och liknande:

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

Med justerade fallback-mått är bytet knappt märkbart — orden upptar samma horisontella utrymme före och efter att det anpassade typsnittet anländer.

Googles arbete med --allow-fallback-font-metrics har nu basstöd i webbläsare, och det finns en verktygskedja (fontaine-biblioteket och liknande) som räknar fram rätt värden åt dig på några sekunder.

Självhosta

Google Fonts är bekvämt, gratis, och medför två verkliga kostnader:

1. En andra TLS-handskakning. Även med HTTP/3 och connection coalescing är ett extra origin sällan gratis.
2. En integritets- och efterlevnadsfråga. Flera europeiska domstolar har slagit fast att laddning av Google Fonts från fonts.gstatic.com innebär överföring av personuppgifter (IP-adressen) till en tredje part. Självhosting tar bort frågan helt.

Kedjan för nedladdning och hosting är:

1. Hämta WOFF2-filen (variabelt bygge om det finns)
2. Dela upp den till de skriftsystem din publik faktiskt använder
3. Servera den från samma origin som resten av din webbplats, med en lång Cache-Control: max-age=31536000, immutable
4. Förladda den mest kritiska vikten: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Det är hela kedjan. Det tar en eftermiddag för en befintlig sajt, och du går nästan aldrig tillbaka.

När du bör hoppa över anpassade typsnitt helt

Det är värt att säga högt: inte varje sajt behöver ett anpassat typsnitt. Systemtypsnittsstacken är nu genuint vacker på varje operativsystem:

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

Vikten är rätt, måtten är rätt, renderingen är optimerad för enheten, och kostnaden i byte över nätet är exakt noll. För en verktygssajt, en intern app, en portfolio som prioriterar innehåll, eller något som riktar sig till användare på långsamma nätverk, är systemstacken det rätta svaret.

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

💡 Prova detta: Konvertera dina TTF- eller OTF-filer till moderna WOFF2 med färdig CSS med hjälp av Webfont Generator, vilket är det formatbyte som inlägget rekommenderar.

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

Den ärliga sammanfattningen

För en typisk liten sajt täcker fyra steg hela prestandahistorien för webbtypsnitt:

1. Ett variabelt typsnitt per familj per skriftsystem
2. font-display: swap med matchade fallback-mått
3. Självhostat med långa cachehuvuden och en preload för den kritiska vikten
4. Eller hoppa över typsnitt helt och använd systemstacken

Gör detta en gång så återtar du flera hundra kilobyte från startsidan, vinner några hundra millisekunders upplevd prestanda och tar bort ett tredjepartsberoende på vägen. Få ändringar har ett bättre förhållande mellan insats och utväxling.