Teckensnittsanvändning är utbredd på de flesta webbsidor och innehåller ofta fel. Många av dessa fel påverkar webbprestandabudgeten negativt. Den här artikeln syftar till att ge information om användning av webbteckensnitt och hjälpa dig att förbättra din webbprestanda.
Som visas i hierarkin som tillämpas vid rendering av en webbsida, kan teckensnittselement fördröja renderingen av andra element tills de laddas. Att hantera denna fördröjning korrekt är viktigt för både Cumulative Layout Shift (CLS) och användarens uppfattning.
Problemet med teckensnittsladdning
Tills sidans teckensnitt har laddats, varierar synligheten för teckensnitt under HTML- och CSS-renderingsprocessen från webbläsare till webbläsare. Här är en sammanfattning av hur olika webbläsare hanterar denna situation:
| webbläsare | Standardbeteende om teckensnittet inte är klart... |
|---|---|
| kant | Använder ett systemteckensnitt tills teckensnittet är klart. Byter ut teckensnitt. |
| krom | Kommer att dölja text i upp till 3 sekunder. Om texten fortfarande inte är klar, använder ett systemteckensnitt tills teckensnittet är klart. Byter ut teckensnitt. |
| firefox | Kommer att dölja text i upp till 3 sekunder. Om texten fortfarande inte är klar, använder ett systemteckensnitt tills teckensnittet är klart. Byter ut teckensnitt. |
| Safari | Döljer text tills teckensnittet är klart. |
För att ta itu med detta problem utan att lita på webbläsarens beteende, introducerades parametern font-display. För närvarande stöder 92 % av webbläsarna parametern font-display.
Vad gör Font-Display?
Under sidladdningsprocessen kan typsnittens utseende variera tills de är helt laddade, beroende på webbläsaren. Till exempel, vissa versioner av webbläsaren Safari döljer texten tills teckensnittet laddas. De font-display: swap CSS-parametern standardiserar detta beteende genom att visa texten med ett systemteckensnitt tills teckensnittsfilerna laddas. När typsnitten har laddats byts systemteckensnittet ut mot det avsedda teckensnittet. Här är ett exempel på användning:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Förladdning av teckensnitt
Använder sig av att ladda teckensnitt innan den kritiska renderingsvägen kan förhindra luckor medan teckensnitt laddas.
BONUS: Industrins syn på teckensnittsanvändning
Enligt SimilarTech-data, låt oss ta en titt på en viktig trend och ögonblicksbild av internetvärlden. Den första grafen nedan visar teckensnittsanvändning på de 10,000 100,000 bästa sidorna, och det andra diagrammet visar teckensnittsanvändning på de XNUMX XNUMX bästa webbplatserna. Låt oss först undersöka dessa grafer:
Det är en skillnad på 5 % i användningen av Google Font och Font Awesome mellan de 10,000 100,000 bästa webbplatserna och de XNUMX XNUMX bästa webbplatserna. Detta säger oss att de 10,000 XNUMX bästa sajterna har optimerat sin typsnittsanvändning. Vi rekommenderar att du undersöker detta som ett anmärkningsvärt ämne. Fundera på hur du kan implementera webbteckensnitt med dina egna lösningar.
BONUS 2: Användningsstatistik för Google Font och Font Awesome
Med hänvisning till den första bonusen föreslår vi att du undersöker de två graferna som visar den numeriska omfattningen av de mest använda teckensnittsbiblioteken. Antalet unika domäner här överstiger miljoner, och dessa miljoner representerar dina SEO-konkurrenter. Att använda dessa bibliotek bättre och mer optimalt än andra kan hjälpa dig att sticka ut.
Genom att följa dessa tips och optimera din teckensnittsanvändning kan du förbättra din webbprestanda och användarupplevelse avsevärt.
