Responsiv laddning av webbtypsnitt, en ny strategi

Optimering av typsnittsladdning för långsammare mobila enheter med responsiv förladdning och responsiva font-face-deklarationer

Arjen Karel - linkedin

Last update: 2026-02-10

Responsiv font display & responsiv förladdningsstrategi för typsnitt

Som Core Web Vitals-specialist ser jag olika kreativa lösningar varje dag. De flesta är inte särskilt meningsfulla, men då och då stöter jag på en strategi som är så enkel och så elegant att den faktiskt fungerar för vissa webbplatser.

Den här artikeln förklarar hur du implementerar responsiv förladdning av typsnitt för desktops tillsammans med font display:optional för att eliminera Flash Of Unstyled Text (FOUT), samtidigt som typsnittet laddas normalt för mobila enheter med font-display: swap.

tips: den här strategin fungerar bra för webbplatser med en större kritisk renderingsväg.

Problemet med tidig typsnittsladdning

När du optimerar Core Web Vitals finns det en enkel regel som alltid gäller:
"Allt du gör före Largest Contentful Paint kommer att sakta ner den Largest Contentful Paint".

Denna princip gäller även för webbtypsnitt. Att prioritera laddning av webbtypsnitt under sidladdning kan förbättra user experience, men om din webbplats kämpar för att uppnå Core Web Vitals-tröskelvärdena, särskilt för specifika enhetstyper, kan du behöva balansera UX mot att förbättra LCP.

Låt oss titta på exemplet nedan från en holländsk tidningssajt. På en mobil enhet köas 3 typsnitt innan LCP-elementet. Detta gör att de 3 typsnitten konkurrerar om tidiga nätverksresurser och skjuter upp bildtimingen.

Responsiv typsnittsstrategi till undsättning!

I fall som detta där det finns mycket tidig nätverkskonkurrens är det meningsfullt att skilja mellan enhetstyper. Vanligtvis kan snabbare desktopenheter med kabelanslutning (och snabbare nätverksanslutningar) hantera fler tidiga nätverksresurser samtidigt och det är helt logiskt att förladda några kritiska typsnittsfiler.

Mobila enheter å andra sidan kan användas på pendlingen till jobbet under mindre än optimala nätverksförhållanden. Mobila enheter har också ofta långsammare processorer och mindre tillgängligt minne jämfört med desktops. Dessa begränsningar innebär att det kan vara meningsfullt att hantera typsnittsladdning olika beroende på enhetstyp.

Desktop: Förladdning av typsnitt förbättrar renderingsprestanda på enheter med bättre bandbredd och processorkraft. Använd font-display: optional för att minimera blockering och eliminera problem med typsnittsbyten. Detta säkerställer att typsnittet bara används om det är tillgängligt inom 100ms efter begäran medan förladdning säkerställer att målet uppnås.
Mobile: Förladda inte typsnittet på grund av nätverkskonkurrens. Använd font-display: swap för snabbare textrendering. Denna metod visar fallback-typsnitt omedelbart medan det anpassade typsnittet fortsätter att laddas i bakgrunden, vilket ger en bättre upplevelse på mindre kraftfulla enheter.

Implementering med <link rel="preload"> och Media Queries

Istället för att ladda typsnittet universellt kan du använda attributet media i HTML:s <link>-tagg tillsammans med CSS för att tillämpa olika typsnittsstrategier baserat på enhetstyper.

HTML-struktur

<head>

  <!-- Preload font for desktop only -->
  <link rel="preload" href="/fonts/custom-font.woff2" 
        as="font" crossorigin="anonymous" 
        media="(min-width: 768px)">

  <style>
    /* Global font settings */
    @font-face {
        font-family: 'CustomFont';
        src: url('/fonts/custom-font.woff2') format('woff2');
        font-display: swap;
    }

    /* Desktop font settings */
    @media (min-width: 767px) {
      @font-face {
        font-display: optional;
      }
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

Fördelar med denna metod

Fokus på Desktop UX: Desktop renderar med webtypsnittet omedelbart, vilket förhindrar FOUT och FOIT.
Fokus på mobilprestanda: font-display: swap säkerställer att användare ser text omedelbart, även om det anpassade typsnittet inte har laddats än.
Deklarativ enkelhet: Undviker JavaScript, minskar komplexitet och förbättrar underhållbarhet.

Verkligt användningsfall

Som nämnt i inledningen: denna strategi bygger på ett verkligt exempel som jag stötte på. En e-handelswebbplats som riktar sig till både desktop- och mobilanvändare implementerade denna strategi. Resultatet:

Desktop: Förbättrad CLS och UX med stiliserade typsnitt som visas nästan omedelbart.
Mobile: Snabbare First Contentful Paint och Largest Contentful Paint säkerställde en snabb user experience, även på långsammare anslutningar.

Compare your segments.

Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.

Analyze Segments >>

Device filtering
Route Analysis
Connection Types

Responsiv laddning av webbtypsnitt, en ny strategi

Core Web Vitals Responsiv laddning av webbtypsnitt, en ny strategi