⚡ Så laddar du webbtypsnitt utan att tappa fart och snabbar upp textrenderingen
När en webbplats tar 3 sekunder att ladda och sedan lägger ytterligare en sekund på att rita om all text, lämnar besökarna. Inte till konkurrenter, de stänger helt enkelt fliken. Problemet är nästan alltid detsamma: webbtypsnitt som laddas utan hänsyn till prestanda.
Enligt HTTP Archive-data för 2025 använder cirka 84% av webbplatserna anpassade webbtypsnitt, och medianwebbplatsen gör 5 förfrågningar till typsnittsfiler på totalt cirka 400 kB. På en dålig anslutning innebär det 2-3 sekunders renderingsblockering medan användarna ser en tom skärm. Google räknar också in Cumulative Layout Shift från typsnittsbyte i Core Web Vitals.
De fyra stegen nedan är inte teori. Det här är det praktiska minimum som löser de allra flesta prestandaproblem med webbtypsnitt. Varje steg tar 5 till 15 minuter.
💡 Snabb översikt:
- Bestäm format: woff2 som primärt och woff som fallback räcker för alla moderna webbläsare.
- Lägg till preload för kritiska typsnitt så att webbläsaren börjar ladda ner direkt istället för att vänta på CSS.
- Kontrollera din font-face: local(), korrekt src-ordning, unicode-range för latinska tecken.
- Sätt font-display: swap, så ser besökarna text direkt även medan typsnittet fortfarande laddas.
Steg 1: Använd woff2 och woff, inget annat behövs
Det finns många webbtypsnittsformat: EOT, TTF, OTF, SVG. Men 2026 behöver du egentligen bara två.
woff2 är den moderna standarden. Filerna är 30% mindre än woff vid samma kvalitet eftersom de använder brotli-komprimering istället för gzip. Webbläsarstöd omfattar alla evergreen-webbläsare, inklusive mobila Safari och Samsung Internet. Globalt sett 98%+ av användarna.
woff är fallback för en liten andel äldre webbläsare (Safari på iOS 11 och äldre, ovanliga företagsmiljöer). Det är också komprimerat och fungerar överallt från IE9+. Lägg det sist i src, så tar webbläsaren woff2 om den kan, annars faller den tillbaka på woff.
Använd inte EOT (Internet Explorer 8 och äldre) eller TTF (råformat, ingen komprimering) 2026. Andelen sådana webbläsare är statistiskt brus, och varje extra format i src ökar CSS-storleken och förvirrar webbläsaren.
Om du har filer i TTF eller OTF, konvertera dem med en onlinegenerator. Transfonter producerar woff2 och woff i en operation, och visar en glyfförhandsvisning och slutlig filstorlek. Ett alternativ är Font Squirrel Webfont Generator.
Steg 2: Förladda kritiska typsnitt
Webbläsaren får reda på typsnitt från CSS, och den läser CSS efter HTML. När den kommer dit har 500-800 ms passerat på en genomsnittlig anslutning. Preload eliminerar denna fördröjning: webbläsaren börjar ladda ner typsnittet så fort den stöter på taggen i <head>, utan att vänta på CSS.
Minimal fungerande tagg:
1 <link rel="preload" as="font" 2 href="/fonts/open-sans.woff2" 3 type="font/woff2" 4 crossorigin="anonymous">
Nyckeln är crossorigin="anonymous". Utan den ignorerar webbläsaren det förladdade typsnittet och laddar ner det igen. Anledningen är att typsnitt hämtas anonymt (CORS), men preload utan crossorigin gör en vanlig förfrågan. Webbläsaren betraktar dessa som olika resurser och matchar dem inte.
Vad som ska förladdas. Inte alla typsnitt på webbplatsen. Bara det som används för huvudtext ovanför mitten av sidan (above the fold): rubrik, brödtext, navigering. Resten kan vänta. Att förladda 4-5 filer ger avtagande avkastning och tar bandbredd från kritiskt innehåll.
Viktig notering om Google Fonts och CDN. Om du använder typsnitt från Google Fonts uppdateras filerna periodiskt, och en preload-länk till en gammal version orsakar dubbel nedladdning (gammal + ny). Istället för preload för CDN-typsnitt, använd <link rel="preconnect"> till typsnittsdomänen. Detta snabbar upp handskakningen utan risk för versionskonflikt:
1 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Prefetch för sekundära typsnitt. rel="prefetch" säger till webbläsaren: "den här resursen kommer att behövas senare, ladda den när huvudinnehållet är klart." Lämpligt för typsnitt på interna sidor eller ikontypsnitt i sidfoten. Prioritet är låg, tar ingen bandbredd.
En modern guide till resursprioritering finns i web.dev-dokumentationen.
Steg 3: Skriv @font-face korrekt
Vid första anblicken är @font-face enkelt. I praktiken har det fyra subtila områden, som vart och ett påverkar hastigheten.
Exempel på en korrekt deklaration:
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 }
Genomgång punkt för punkt:
local(): först i src. Om användaren redan har typsnittet installerat på sitt system (Roboto på Android, Segoe UI på Windows, San Francisco på macOS), tar webbläsaren den lokala kopian och laddar ner noll byte. Lägg alltid local() som första rad i src. Ta namnet från själva typsnittsfilen: local('Open Sans') och local('Roboto Regular').
Formatordning. Webbläsaren går igenom src från vänster till höger och tar det första format den förstår. Alltså: local() → woff2 → woff. Ingen EOT/TTF/SVG i slutet, om du inte har en specifik målgrupp med gamla webbläsare, och då läggs de EFTER woff (inte före).
unicode-range: ladda bara de glyfer du behöver. För latinska tecken räcker intervallet U+0000-00FF (Basic Latin + Latin-1 Supplement). Det är cirka 250 glyfer jämfört med flera tusen i den fullständiga uppsättningen. Faktisk filstorlek sjunker 3-5 gånger. Överbelasta inte intervallet: varje extra unicode-block lägger till glyfer som ingen kommer att se. För kyrilliska webbplatser, lägg till U+0400-04FF.
Ordning på @font-face-block. Om du har flera vikter (regular, bold, italic), lägg regular-vikten (font-weight: 400) först. Webbläsaren börjar ladda ner den.
Steg 4: Aktivera font-display: swap och säg adjö till FOIT
Flash of Invisible Text (FOIT) är när webbläsaren döljer text i 3 sekunder medan den väntar på typsnittet. Användarna ser en tom sida. Flash of Unstyled Text (FOUT) är när text är omedelbart synlig i ett systemtypsnitt, för att sedan ersättas med det anpassade. Det andra är alltid bättre än det första.
font-display: swap i @font-face gör exakt detta: text renderas direkt i ett systemtypsnitt, och när det anpassade typsnittet laddas, byts det in. Idealiskt för brödtext.
Andra värden och när de ska användas:
swap: för brödtext. Text är synlig omedelbart, bytet sker smidigt.optional: för dekorativa typsnitt och ikoner. Webbläsaren avgör om typsnittet överhuvudtaget ska laddas ner. På en dålig anslutning kommer den att avstå och behålla systemtypsnittet. Vänteperioden är 100 ms.block: kort blockering (vanligtvis 3 sekunder), sedan är text synlig, typsnittet byts ut när det laddats. Används sällan.fallback: en kompromiss. Kort blockering, sedan är text synlig, typsnittet byts ut om det laddas snabbt.
I praktiken, använd swap för brödtext och optional för ikontypsnitt och dekoration. Det räcker.
Webbläsarbeteende utan font-display. Om du inte anger något, döljer Chrome text i upp till 3 sekunder, Firefox i upp till 3 sekunder, Safari på obestämd tid, och Edge visar systemtypsnittet direkt. Med font-display: swap blir detta beteende enhetligt och resultatet förutsägbart.
Hur du verifierar resultatet
Kontrollera din webbplats före och efter på web.dev/measure. Lighthouse visar "Ensure text remains visible during webfont load" som en separat rad. Om granskningen är röd fungerar inte din font-display eller så saknas den.
För manuell verifiering: öppna DevTools → Nätverk, ställ in strypning till "Slow 3G" och uppdatera sidan. Text ska visas i ett systemtypsnitt direkt, inte efter 3 sekunders tom skärm.
Skärmbilderna nedan visar skillnaden mellan standardmetoden och den optimerade (test på Slow 3G):
Standard: text döljs tills typsnittet laddas
Optimerat beteende: text är synlig direkt i ett systemtypsnitt
Skillnaden är synlig för blotta ögat: den första skärmbilden visar en vit skärm, den andra visar innehåll tillgängligt direkt.
På performance.now() 2024-konferensen tar Mandy Michael upp avancerade strategier: inkrementell unicode-range, typsnittsuppdelning och arbete med variabla typsnitt. För den som vill gå bortom de fyra grundläggande stegen.
⁉️🤔 Vanliga frågor
Varför behöver jag woff om woff2 stöds överallt?
Återstående användare av gammal iOS Safari (iOS 11 och äldre) och ovanliga företagsmiljöer med låsta webbläsare stöder inte woff2. Utan en woff-fallback kommer dessa användare att se ett systemtypsnitt istället för ditt. Woff lägger till 15-20 kB till uppsättningen: ett försumbart pris för att täcka den återstående andelen.
Kan jag bara använda Google Fonts och inte oroa mig?
Ja, och för de flesta webbplatser är detta den optimala vägen. Google Fonts serverar automatiskt woff2 till moderna webbläsare, använder ett geodistribuerat CDN och stöder
display=swapsom en URL-parameter. Nackdelar: beroende av ett externt CDN (integritetshänsyn, GDPR), oförmåga att kontrolleraunicode-rangeoch lokal typsnittsinstallation. Om integritet och kontroll är viktigt, hosta dina typsnitt själv.
Hur vet jag om typsnitt faktiskt saktar ner min webbplats?
Lighthouse (fliken Audits i Chrome DevTools) visar granskningen "Ensure text remains visible during webfont load." WebPageTest tillhandahåller ett vattenfallsdiagram med tidtagning för varje typsnittsförfrågan. Om typsnitt startar senare än den första CSS:en är preload inte konfigurerad. Om layout shift är större än 0,1 orsakar typsnittet Cumulative Layout Shift, och Google räknar detta i Core Web Vitals.
font-display: swap förstör designen, text "hoppar" vid byte?
Ja, detta är en känd nackdel med swap. Bekämpa det med två tekniker. För det första: sätt
font-sizeochline-heightför text så att de matchar systemets fallback-typsnitt. Skillnaden i mått blir minimal. För det andra: använd Font Style Matcher eller egenskapensize-adjusti@font-face(tillgänglig i moderna webbläsare) för att matcha det anpassade typsnittets mått mot systemtypsnittet. Efter justering blir CLS noll.
Ska jag förladda alla typsnitt på webbplatsen?
Nej. Förladda bara kritiska typsnitt: de som utgör text ovanför mitten av sidan (de första 1-2 skärmarna). Ladda resten normalt via CSS. Att förladda 5+ typsnitt täpper till bandbredden och försenar viktigare resurser i kön. I praktiken täcker 1-2 preload-länkar de allra flesta scenarier.
Är det värt ansträngningen: fyra steg, fyra minuter
Att konfigurera webbtypsnitt är inte ett veckolångt projekt. Att konvertera till woff2, fixa @font-face, preload och font-display: swap tar 20-30 minuters arbete, även om du aldrig har gjort det förut.
Fördelen är mätbar: text blir synlig 1,5-2,5 sekunder tidigare på Slow 3G. Core Web Vitals straffar inte för layout shift. Och användare lämnar inte medan de stirrar på en vit skärm.
Börja med ett typsnitt: huvudbrödtextens typsnitt. Gör de fyra stegen. Kontrollera Lighthouse före och efter. Skillnaden i siffror kommer att vara mer övertygande än något argument.
Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.