⚡ Slik laster du inn nettfonter uten å miste hastighet og akselererer tekstrendering
Når et nettsted bruker 3 sekunder på å laste og deretter bruker enda et sekund på å tegne opp all teksten på nytt, drar de besøkende. Ikke til konkurrenter, de lukker bare fanen. Problemet er nesten alltid det samme: nettfonter lastet uten å tenke på ytelse.
Ifølge data fra HTTP Archive for 2025 bruker omtrent 84% av nettsteder egendefinerte nettfonter, og mediannettstedet gjør 5 forespørsler til fontfiler på til sammen rundt 400 KB. På en dårlig tilkobling betyr det 2-3 sekunder med render-blokkering mens brukerne ser en blank skjerm. Google regner også Cumulative Layout Shift fra fontbytte inn i Core Web Vitals.
De fire trinnene nedenfor er ikke teori. Dette er det praktiske minimumet som løser de aller fleste ytelsesproblemene med nettfonter. Hvert trinn tar 5 til 15 minutter.
💡 Rask oversikt:
- Bestem deg for formater: woff2 som primærformat og woff som fallback er nok for alle moderne nettlesere.
- Legg til preload for kritiske fonter slik at nettleseren begynner nedlastingen umiddelbart i stedet for å vente på CSS.
- Sjekk font-face: local(), riktig rekkefølge i src, unicode-range for latinske tegn.
- Sett font-display: swap, så ser de besøkende tekst umiddelbart selv om fonten fortsatt lastes.
Trinn 1: Bruk woff2 og woff, ikke noe annet er nødvendig
Det finnes mange nettfontformater: EOT, TTF, OTF, SVG. Men i 2026 trenger du egentlig bare to.
woff2 er den moderne standarden. Filene er 30% mindre enn woff ved samme kvalitet fordi de bruker brotli-komprimering i stedet for gzip. Nettleserstøtten omfatter alle evergreen-nettlesere, inkludert Safari på mobil og Samsung Internet. Globalt sett 98%+ av brukerne.
woff er fallbacken for en liten andel eldre nettlesere (Safari på iOS 11 og eldre, sjeldne bedriftsmiljøer). Det er også komprimert og fungerer overalt fra IE9+. Legg det sist i src, så tar nettleseren woff2 hvis den kan, ellers faller den tilbake til woff.
Ikke bruk EOT (Internet Explorer 8 og eldre) eller TTF (råformat, ingen komprimering) i 2026. Andelen slike nettlesere er statistisk støy, og hvert ekstra format i src øker CSS-størrelsen og forvirrer nettleseren.
Hvis du har filer i TTF eller OTF, konverter dem med en nettbasert generator. Transfonter produserer woff2 og woff i én operasjon, og viser en forhåndsvisning av glyfer og endelig filstørrelse. Et alternativ er Font Squirrel Webfont Generator.
Trinn 2: Forhåndslast kritiske fonter
Nettleseren får vite om fonter fra CSS, og den leser CSS etter HTML. Innen den kommer dit, har det gått 500-800 ms på en gjennomsnittlig tilkobling. Preload kutter denne forsinkelsen til null: nettleseren begynner å laste ned fonten så snart den møter taggen i <head>, uten å vente på CSS.
Minimal fungerende tagg:
1 <link rel="preload" as="font" 2 href="/fonts/open-sans.woff2" 3 type="font/woff2" 4 crossorigin="anonymous">
Nøkkelen er crossorigin="anonymous". Uten den ignorerer nettleseren den forhåndslastede fonten og laster den ned på nytt. Årsaken er at fonter hentes anonymt (CORS), men preload uten crossorigin gjør en vanlig forespørsel. Nettleseren anser disse som forskjellige ressurser og matcher dem ikke.
Hva som bør forhåndslastes. Ikke alle fonter på nettstedet. Bare den som brukes til hovedtekst over folden (above the fold): overskrift, brødtekst, navigasjon. Resten kan vente. Å forhåndslaste 4-5 filer gir avtagende utbytte og tar båndbredde fra kritisk innhold.
Viktig merknad om Google Fonts og CDN. Hvis du bruker fonter fra Google Fonts, oppdateres filene med jevne mellomrom, og en preload-lenke til en gammel versjon vil forårsake dobbel nedlasting (gammel + ny). I stedet for preload for CDN-fonter, bruk <link rel="preconnect"> til fontdomenet. Dette fremskynder håndtrykket uten risiko for versjonskonflikt:
1 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Prefetch for sekundære fonter. rel="prefetch" forteller nettleseren: «denne ressursen trengs senere, last den når hovedinnholdet er klart.» Egnet for fonter på interne sider eller ikonfonter i bunnteksten. Prioriteten er lav, den tar ikke båndbredde.
En moderne guide til ressursprioritering finnes i web.dev-dokumentasjonen.
Trinn 3: Skriv @font-face riktig
Ved første øyekast er @font-face enkelt. I praksis har det fire subtile områder, som hver påvirker hastigheten.
Eksempel på en korrekt deklarasjon:
1 @font-face { 2 font-family: 'Open Sans'; 3 font-weight: 400; 4 font-style: normal; 5 font-display: swap; 6 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 7 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 8 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 9 U+FEFF, U+FFFD; 10 src: local('Open Sans'), 11 url('/fonts/open-sans.woff2') format('woff2'), 12 url('/fonts/open-sans.woff') format('woff'); 13 }
Gjennomgang punkt for punkt:
local(): først i src. Hvis brukeren allerede har fonten installert på systemet sitt (Roboto på Android, Segoe UI på Windows, San Francisco på macOS), tar nettleseren den lokale kopien og laster ned null byte. Legg alltid local() som første linje i src. Ta navnet fra selve fontfilen: local('Open Sans') og local('Roboto Regular').
Formatrekkefølge. Nettleseren går gjennom src fra venstre mot høyre og tar det første formatet den forstår. Derfor: local() → woff2 → woff. Ingen EOT/TTF/SVG på slutten, med mindre du har et spesifikt publikum med gamle nettlesere, og da skal de ETTER woff (ikke før).
unicode-range: last bare glyfene du trenger. For latinske tegn er området U+0000-00FF (Basic Latin + Latin-1 Supplement) nok. Det er omtrent 250 glyfer mot flere tusen i det komplette settet. Faktisk filstørrelse synker 3-5 ganger. Ikke overbelast området: hver ekstra unicode-blokk legger til glyfer som ingen kommer til å se. For kyrilliske nettsteder, legg til U+0400-04FF.
Rekkefølgen på @font-face-blokkene. Hvis du har flere vekter (regular, bold, italic), legg regular-vekten (font-weight: 400) først. Nettleseren vil begynne å laste ned den.
Trinn 4: Aktiver font-display: swap og si farvel til FOIT
Flash of Invisible Text (FOIT) er når nettleseren skjuler tekst i 3 sekunder mens den venter på fonten. Brukerne ser en blank side. Flash of Unstyled Text (FOUT) er når tekst er umiddelbart synlig i en systemfont, for så å bli erstattet med den egendefinerte. Det andre er alltid bedre enn det første.
font-display: swap i @font-face gjør akkurat dette: tekst rendres umiddelbart i en systemfont, og når den egendefinerte fonten lastes, byttes den inn. Ideelt for brødtekst.
Andre verdier og når de bør brukes:
swap: for brødtekst. Tekst er synlig umiddelbart, byttet er sømløst.optional: for dekorative fonter og ikoner. Nettleseren bestemmer om fonten skal lastes ned i det hele tatt. På en dårlig tilkobling vil den nekte og beholde systemfonten. Venteperioden er 100 ms.block: kort blokkering (vanligvis 3 sekunder), deretter er tekst synlig, fonten byttes når den er lastet. Sjelden brukt.fallback: et kompromiss. Kort blokkering, deretter er tekst synlig, fonten byttes hvis den lastes raskt.
I praksis, bruk swap for brødtekst og optional for ikonfonter og dekorasjon. Det er nok.
Nettleseratferd uten font-display. Hvis du ikke spesifiserer noe, skjuler Chrome tekst i opptil 3 sekunder, Firefox i opptil 3 sekunder, Safari på ubestemt tid, og Edge viser systemfonten umiddelbart. Med font-display: swap blir denne atferden enhetlig og resultatet forutsigbart.
Hvordan verifisere resultatet
Sjekk nettstedet ditt før og etter på web.dev/measure. Lighthouse vil vise «Ensure text remains visible during webfont load» som en egen linje. Hvis revisjonen er rød, fungerer ikke font-display eller mangler.
For manuell verifisering: åpne DevTools → Nettverk, sett throttling til «Slow 3G» og oppdater siden. Tekst skal vises i en systemfont umiddelbart, ikke etter 3 sekunder med blank skjerm.
Skjermbildene nedenfor viser forskjellen mellom standardtilnærmingen og den optimaliserte (test på Slow 3G):
Standard: tekst er skjult til fonten lastes
Optimalisert atferd: tekst er synlig umiddelbart i en systemfont
Forskjellen er synlig for det blotte øye: det første skjermbildet viser en hvit skjerm, det andre viser innhold tilgjengelig umiddelbart.
På performance.now() 2024-konferansen dekker Mandy Michael avanserte strategier: inkrementell unicode-range, fontoppdeling og arbeid med variable fonter. For de som ønsker å gå utover de fire grunnleggende trinnene.
⁉️🤔 Ofte stilte spørsmål
Hvorfor trenger jeg woff hvis woff2 støttes overalt?
Gjenværende brukere av gammel iOS Safari (iOS 11 og eldre) og sjeldne bedriftsmiljøer med låste nettlesere støtter ikke woff2. Uten en woff-fallback vil disse brukerne se en systemfont i stedet for din. Woff legger til 15-20 KB i settet: en ubetydelig pris for å dekke den gjenværende andelen.
Kan jeg bare bruke Google Fonts og ikke bekymre meg?
Ja, og for de fleste nettsteder er dette den optimale veien. Google Fonts serverer automatisk woff2 til moderne nettlesere, bruker et geografisk distribuert CDN, og støtter
display=swapsom en URL-parameter. Ulemper: avhengighet av et eksternt CDN (personvernhensyn, GDPR), manglende evne til å kontrollereunicode-rangeog lokal fontinstallasjon. Hvis personvern og kontroll er viktig, selvhost fontene dine.
Hvordan vet jeg om fonter faktisk bremser nettstedet mitt?
Lighthouse (Audits-fanen i Chrome DevTools) vil vise revisjonen «Ensure text remains visible during webfont load.» WebPageTest gir et fossefall med timing for hver fontforespørsel. Hvis fonter starter senere enn den første CSS-en, er ikke preload konfigurert. Hvis layout shift er større enn 0,1, forårsaker fonten Cumulative Layout Shift, og Google teller dette i Core Web Vitals.
font-display: swap ødelegger designet, teksten «hopper» ved bytte?
Ja, dette er en kjent ulempe med swap. Bekjemp det med to teknikker. Først: sett
font-sizeogline-heightfor tekst slik at de matcher systemets fallback-font. Forskjellen i metrikk vil være minimal. Andre: bruk Font Style Matcher ellersize-adjust-egenskapen i@font-face(tilgjengelig i moderne nettlesere) for å matche den egendefinerte fontens metrikk til systemfonten. Etter justering vil CLS være null.
Bør jeg forhåndslaste alle fonter på nettstedet?
Nei. Forhåndslast bare kritiske fonter: de som utgjør tekst over folden (de første 1-2 skjermene). Last resten normalt gjennom CSS. Å forhåndslaste 5+ fonter tetter båndbredden og forsinker viktigere ressurser i køen. I praksis dekker 1-2 preload-lenker det store flertallet av scenarier.
Er det verdt innsatsen: fire trinn, fire minutter
Å sette opp nettfonter er ikke et ukeslangt prosjekt. Konvertering til woff2, fiksing av @font-face, preload og font-display: swap tar 20-30 minutters arbeid, selv om du aldri har gjort det før.
Gevinsten er målbar: tekst blir synlig 1,5-2,5 sekunder tidligere på Slow 3G. Core Web Vitals straffer ikke for layout shift. Og brukerne drar ikke mens de stirrer på en hvit skjerm.
Start med én font: hovedbrødtekstfonten. Gjør de fire trinnene. Sjekk Lighthouse før og etter. Forskjellen i tall vil være mer overbevisende enn noe argument.
Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.