Fonts lettertypes sneller laden strategie webdesign

Logo cursus traing wordpress

Fonts lettertypes sneller laden strategie webdesign

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 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 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 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!


Meer weten over Fonts lettertypes sneller laden strategie webdesignof info?

Wil je meer weten? Veel bezoekers met interesse in Fonts lettertypes sneller laden strategie webdesign bekeken ook de onderstaande handleidingen:


WordPress cursus onderhoud

De meeste problemen met WordPress sites ontstaan door een combinatie van factoren. Van webhosting tot de inrichting van je site. Ik heb de laatste 15 jaar vele WordPress sites en webshops vast zien lopen, langzaam of gehackt zien worden door de verkeerde aanpak.

Deze problemen, ellende en schade is te vermijden door de juiste aanpak en strategie. Het is even werk en vergt een investering in tijd, geld en energie maar daarna heb je gegarandeerd minder problemen, meer plezier, meer controle en een betere WordPress site.

WordPress training onderhoud en beheer

Leer hoe je WordPress sites en webshops beter kan beheren en beveiligen in de speciale onderhoudscursus:
WordPress training Onderhoud en beheer

WordPress Bootcamp

Leer hoe je je WordPress site sneller en gestroomlijnder kan bouwen in de WordPress Bootcamp:
Web-development in WordPress Bootcamp

Nog vragen over Fonts lettertypes sneller laden strategie webdesign?

Neem eventueel contact op met Arthur als je nog vragen hebt over onderhoud, beveiliging, Fonts lettertypes sneller laden strategie webdesign en WordPress websites.

WordPress expert

Arthur Wentzel, web-developer

06 20 83 05 83

Scroll naar boven