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.
IN DEZE HANDLEIDING:
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:
First Contentful Paint (FCP) optimaliseren voor Google
De First Contentful Paint (FCP) en Google’s Core Web Vitals. De First Contentful Paint (FCP)…
Largest Contentful Paint (LCP) optimaliseren laadtijd
Wat is Largest Contentful Paint (LCP) en waarom is het belangrijk? De Largest Contentful Paint…
Time To First Byte (TTFB) verbeteren laadtijd pagina
Time-to-first-byte is één van de belangrijkste metrieken om in de gaten te houden. Maar wat…
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:
Gzip compressie inschakelen WordPress snelheid check
GZIP compressie maakt uw website sneller. Lees in deze handleiding hoe je GZIP compressie kunt…
DOM grootte verkleinen WP website Document Object Model
Lazy Load snel laden afbeeldingen snelheid WP plugin
Verwijder ongebruikte CSS code verkleinen snel laden
Verwijder ongebruikte CSS Als je code in je stylesheets hebt die niet gebruikt wordt, waarom…
Minify HTML CSS JavaScript bestanden kleiner maken SEO
Wat is minify of minificatie voor WordPress website Minificatie is het proces waarbij code en…
Real User Monitoring -RUM gebruikers ervaring prestatie
Real User Monitoring tools helpen softwareteams bij het identificeren van front-end prestatieproblemen, het meten van…
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!