Teckensnitt och ikoner
Typsnitt är en liten post som ger en irriterande effekt: antingen står texten osynlig medan filen laddas, eller så byts den ut mitt framför ögonen på besökaren så att sidan hoppar. Båda går att lösa, och det är billigt.
Osynlig text eller hoppande text
Utan inställningen font-display väntar webbläsaren med att visa texten tills typsnittet laddat – besökaren ser en tom yta. Med fel inställning visas texten i ett standardtypsnitt och byts sedan, vilket får sidan att flytta sig och slår mot CLS-måttet i Core Web Vitals. Rätt inställning är font-display: swap kombinerat med ett reservtypsnitt som är ungefär lika brett.
Färre vikter, mindre vikt
- Varje vikt är en egen fil. Regular, medium, semibold, bold och kursiv av två familjer blir tio nedladdningar.
- Två vikter räcker nästan alltid. En för brödtext, en för rubriker.
- Ladda dem själv. Typsnitt från en extern tjänst betyder ytterligare en uppkoppling innan texten kan visas.
- Begränsa teckenuppsättningen. En svensk sajt behöver latinska tecken, inte kyrilliska och grekiska.
Ikonpaket är ofta värre än typsnitten
Ett komplett ikonbibliotek kan väga flera hundra kilobyte för att sajten använder tolv ikoner. Lägg in ikonerna som SVG direkt i sidan i stället – de blir några kilobyte totalt och kräver ingen extra nedladdning.
Vad det ger
Typsnittsarbete flyttar sällan mer än 2–8 poäng och kostar 2 000–5 000 kronor. Det är alltså inte det första ni ska göra – men det tar bort en synlig irritation som besökare faktiskt märker, till skillnad från en del andra poäng. Se vad åtgärderna kostar.
Vanliga frågor
Kan jag använda systemtypsnitt i stället?
Ja, och det är den snabbaste lösningen som finns eftersom ingenting behöver laddas. Det kostar en del av den grafiska profilen, vilket är ett designbeslut snarare än ett tekniskt.
Är Google Fonts långsamt?
Det är snabbt, men det är fortfarande en extra uppkoppling till en annan domän. Att ladda ner filerna och lägga dem på egen server är oftast snabbare och enklare att resonera kring.
Varför hoppar rubriken när sidan laddar?
Reservtypsnittet är bredare eller smalare än det riktiga, så texten byter storlek när filen kommit på plats. Välj ett reservtypsnitt med liknande bredd.
Vill du att vi ser över typsnitten?
Mät sidan först om du inte gjort det – då vet vi båda vad vi pratar om. Sedan säger vi vad som går att åtgärda och vad det kostar ungefär. Kostnadsfritt, och vi säger till om vi tycker att pengarna gör mer nytta någon annanstans.