Webfonts en SEO: zo laad je lettertypen snel

Definitie

Webfonts zijn lettertypen die de browser downloadt in plaats van systeemfonts te gebruiken. Slecht geladen fonts geven onzichtbare tekst, layout shifts (CLS) en een tragere LCP.

Waarom webfonts de snelheid raken

Een webfont is een extra bestand dat de browser moet ophalen. Zolang het er niet is, verbergt de browser de tekst of toont hij een fallback-font. Volgens web.dev verbergen Chromium en Firefox tekst tot 3 seconden; Safari wacht standaard onbeperkt.

Met font-display bepaal je dat gedrag. swap toont direct een fallback en wisselt zodra het font er is; dat kan verspringen geven. optional geeft het font ongeveer 100 ms; komt het later, dan blijft de fallback staan. fallback zit daartussen.

web.dev raadt WOFF2 aan, het formaat met de beste compressie. Subset fonts tot de tekens die je nodig hebt en gebruik unicode-range. Met size-adjust in je @font-face stem je het fallback-font af op het webfont, zodat de wissel minder layout shift geeft.

Zo werkt het in Magento/Hyvä, Shopify en Laravel

In Hyvä host je fonts meestal zelf in het thema en definieer je ze in de Tailwind-configuratie. Zet de @font-face-regels in de CSS die in de <head> geladen wordt, met font-display. Preload alleen het font dat boven de vouw gebruikt wordt.

In Shopify komen thema-fonts uit de fontbibliotheek van Shopify. Het Liquid-filter font_face accepteert een parameter font_display, bijvoorbeeld font_display: 'swap'. Controleer of je thema dat al doet.

In Laravel bundel je fonts via Vite of zet je ze in public. Gebruik je Google Fonts via hun CDN, preconnect dan naar fonts.gstatic.com met crossorigin. Self-hosten is volgens web.dev niet automatisch sneller; vergelijk de laadtijd.

Veelgemaakte fouten

- Vier of meer gewichten en stijlen laden, waarvan de helft nergens gebruikt wordt.

- Fonts laden via @import in een CSS-bestand. Dat maakt de keten langer.

- Een preload zonder crossorigin. De browser haalt het font dan twee keer op.

- Icoonfonts gebruiken. web.dev noemt die gevoeliger voor layout shifts; SVG-iconen zijn meestal beter.

- Alleen naar de Lighthouse-score kijken en niet naar CLS in velddata.

@font-face met swap en preload

<link rel="preload" href="/fonts/inter-latin.woff2"
      as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

Verder lezen

Gerelateerde begrippen

CLS (Cumulative Layout Shift)LCP (Largest Contentful Paint)FCP (First Contentful Paint)Preload en fetchpriority Preconnect Render-blocking resources Core Web Vitals

Veelgestelde vragen

Welke font-display-waarde moet ik kiezen?+

swap houdt tekst direct leesbaar maar kan verspringen. optional geeft de beste performance en geen wissel, maar soms zie je het webfont pas bij een volgende pagina. Je kunt mixen, bijvoorbeeld swap voor koppen en optional voor lopende tekst.

Is Google Fonts zelf hosten beter?+

Niet automatisch, zegt web.dev. Het scheelt een extra domein, maar je moet zelf zorgen voor goede caching en compressie. Meet het verschil.

Welk fontformaat gebruik ik?+

WOFF2. Het heeft de beste compressie en wordt breed ondersteund. Andere formaten heb je voor moderne browsers niet meer nodig.

Webfonts