Fonts en lettertypes wil je laden. In deze handleiding wil ik de beste laadstrategieën met je delen en uitleggen hoe je ze allemaal uitvoert.

Tekst weergeven voordat het font/lettertype is geladen

Soms zie je een website waar alle lay-out elementen al geladen zijn en dan verschijnt de inhoud, d.w.z. de tekst op de pagina, in één keer. Dat komt omdat de browser de tekst nog verbergt, en pas laat zien als de rest van de website geladen is. Hij wacht tot het lettertype nog niet klaar is om te worden weergegeven.

Dit kan een enorme impact hebben op je FCP score. Van alle ‘FCP-tweaks’ is dit waarschijnlijk de beste tip om je Google Core Web Vitals te verbeteren. Lees hierover meer:

Zelf gehoste lettertypes vs. cloud gehoste lettertypes

Er zijn twee belangrijke manieren om lettertypes te hosten:

• Gebruik een cloudprovider.
• De lettertypes zelf hosten.

Hoe we lettertypes laden, verschilt sterk naargelang welke optie je kiest.

Laad lettertypes met cloud-hosted lettertypes

Het is vaak gemakkelijker om fonts met cloud-hosting te gebruiken. De provider zal ons een link geven om de fonts te laden. We kunnen deze link gewoon in onze HTML plakken en dan krijgen we ons webfont. Hier is een voorbeeld waarbij we webfonts laden van Adobe Fonts now (voorheen bekend als Typekit).

Helaas is dit niet de beste aanpak. De href blokkeert de browser. Als het laden van het webfont vastloopt, zullen gebruikers niets kunnen doen terwijl ze wachten.

Typekit voorzag vroeger in JavaScript dat asynchroon een lettertype laadde. Het is jammer dat ze deze JavaScript versie niet meer laten zien. (De code werkt echter nog steeds, maar ik heb geen idee wanneer, of als, het zal stoppen met werken).

Google Web Fonts sneller laden

Het laden van lettertypes van Google Fonts is iets beter omdat het font-display: swap biedt. Hier is een voorbeeld waar we Lato laden van Google Fonts.

Voeg dit toe aan je CSS:
font-display: swap
De display=swap parameter activeert font-display: swap).

Bijvoorbeeld:

<link
  href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap"
  rel="stylesheet"
/>

Fonts laden met zelf gehoste fonts

Je kunt je fonts alleen zelf hosten als je de licentie hebt om dat te doen. Aangezien lettertypes duur kunnen zijn, kiezen de meeste mensen ervoor om een cloud provider te gebruiken.

Er is echter een goedkope manier om fonts te krijgen. Design Cuts heeft af en toe aanbiedingen voor lettertypen waarbij je voor slechts $29 per bundel waanzinnig goede lettertypen kunt krijgen. Elke bundel kan tot 12 fonts bevatten. Ik heb klassiekers zoals Claredon, DIN, Futura, en een hele reeks lettertypes die ik kan spelen door te kamperen op hun nieuwsbrief voor deze aanbiedingen.

Als we fonts zelf willen hosten, moeten we nog twee concepten begrijpen: @font-face en font-display: swap.

@font-face

Met @font-face kunnen we lettertypes declareren in CSS. Als we zelf fonts willen hosten, moeten we @font-face gebruiken om onze fonts aan te geven.

In deze declaratie, kunnen we vier dingen specificeren:

• font-family: Dit vertelt CSS (en JavaScript) de naam van ons lettertype.
  
• src: Pad om het lettertype te vinden zodat ze geladen kunnen worden
  
• font-weight: Het gewicht van het lettertype. Standaard op 400 indien weggelaten.
  
• font-style: Of het lettertype cursief gemaakt moet worden. Wordt standaard op normaal gezet indien weggelaten.
  

Voor src moeten we verschillende lettertype-formaten opgeven. Voor een praktisch niveau van browserondersteuning, kunnen we woff2 en woff gebruiken.

Voorbeeld Fontface fonts laden

Hier is een voorbeeld waar we Lato laden via @font-face.

@font-face {
font-family: Lato;
src: url(‘path-to-lato.woff2’) format(‘woff2’),
url(‘path-to-lato.woff’) format(‘woff’);
}

@font-face {
font-family: Lato;
src: url(‘path-to-lato-bold.woff2’) format(‘woff2’),
url(‘path-to-lato-bold.woff’) format(‘woff’);
font-weight: 700;
}

@font-face {
font-family: Lato;
src: url(‘pad-naarlato-italic.woff2’) format(‘woff2’),
url(‘path-to-lato-italic.woff’) format(‘woff’);
font-style: cursief;
}

@font-face {
font-family: Lato;
src: url(‘path-to-lato-bold-italic.woff2’) format(‘woff2’),
url(‘path-to-lato-bold-italic.woff’) format(‘woff’);
font-weight: 700;
font-style: cursief;
}

Uitgebreide handleiding fonts laden:
https://www.zachleat.com/web/comprehensive-webfonts/

Meer tip naast fonts om website sneller te maken

Meer tips en handleidingen om je website sneller te maken:

Daarnaast is deze link nuttig om de snelheid van je website te meten:
Snelheid meten en analyseren WordPress website
Succes met het verbeteren. van je lettertypes laden!