Google webfonts lokaal laden
Google Fonts lokaal laden is een goede manier om page speed te verbeteren. Normaal worden de lettertypen geladen van de Google website iedere keer als iemand een verbinding maakt met de website. Waarom iedere keer van een andere server ophalen als je Google Fonts ook zelf kan hosten? Dat kan laadtijd van de website verbeteren en is daarmee goed voor page speed en Web Vitals.
Iedere keer als iemand de website bezoekt moet er een verbinding gemaakt worden met de server van Google. Eerst moet een CSS-bestanden geladen en dit bestand zal de lettertypen downloaden. De server van Google kan langzaam reageren door traffic en andere oorzaken. Dit is direct te merken op de website.
Voor meer achtergrondinformatie hierover zie:
- Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen
- Laad belangrijke verzoeken vooraf
- Doorlinken van kritieke verzoeken voorkomen
Laad Google webfonts lokaal voor page speed.
Google Fonts lokaal laden
Ga naar de google-webfonts-helper website hier: google-webfonts-helper
Volg de stappen zoals omschreven in de volgende afbeelding:
1. Selecteer font
Links boven op de pagina kan je de naam van de font invullen of je kan jer eentje kiezen in de lijst eronder.
2. Selecteer styles en weights
Probeer dit zo veel mogelijk te beperken. Selecteer alleen styles en weights die op de website worden gebruikt.
3. Selecteer “Modern browsers” voor page speed.
Ondersteund geen oude browsers. Deze laad alleen woff en woff2. Best support zal ook eot, ttf en svg.
4.Vul naam in van de map op de server waar de fonts zullen worden opgeslagen.
Dit is belangrijk voor de CSS zodat duidelijk is waar de fonts zijn opgeslagen. Als de fonts niet gevonden kunnen worden is dit de plaatst waar men begint met probleem oplossen.
5. Download en unzip zip-bestand.
Sla het bestand lokaal op in de computer en pak het bestand uit. Hier staan de verschillende fonts in.
6. Kopieer en minify CSS en toevoegen aan stylesheet.
De CSS met “@fontface” moet altijd in een CSS bestand geplaatst worden. Om geen extra file te laden, plaats dit in het bestaande CSS bestand van de website.
Upload de font naar de map die bij punt 4 is gekozen.
8. Verwijder alle links naar de Google fonts servers
Deze links zijn nu overbodig en dienen daarom verwijderd te worden uit <head> en/of CSS.
9. Zorg dat de webfonts vooraf worden geladen.
Voor elke font moet een aparte regel gemaakt worden. Bovenstaande zal er als volgt uit komen te zien in <head>. Plaatst het zo hoog mogelijk.
<link rel="preload" href="http://www.mijn-website.nl/fonts/roboto-v27-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="http://www.mijn-website.nl/fonts/rroboto-v27-latin-regular.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="http://www.mijn-website.nl/fonts/roboto-v27-latin-500.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="http://www.mijn-website.nl/fonts/roboto-v27-latin-500.woff" as="font" type="font/woff" crossorigin>
<link rel="preload" href="http://www.mijn-website.nl/fonts/roboto-v27-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="http://www.mijn-website.nl/fonts/roboto-v27-latin-700.woff" as="font" type="font/woff" crossorigin>
Vergeet niet dat hier het domeinnaam en het pad naar de fonts aangepast moeten worden. Voor de mensen die WordPress gebruiken kan dit het best geplaatst worden in het child-theme.
Vraag vrijblijvend om meer informatie of advies.
Google Fonts lokaal laden voor page speed
Als bovenstaande stappen volledig zijn doorgelopen is het mogelijk de nieuwe lettertypen te gebruiken op de website. Op deze manier hoeft er geen verbinding gemaakt te worden met de Google Font servers wat behoorlijk wat tijd kan schelen.
Het is wel belangrijk dat men altijd zo min mogelijk webfonts gebruikt. Elke font moet geladen worden en bovenstaande zijn bij elkaar meer dan 100KB dat extra geladen dient te worden op de website. Er moet dan ook gelet worden op de grote van de bestanden.
Voor wie echt alles uit page speed wil halen is het verstandiger om standaard lettertypen te gebruiken. Dit zijn lettertypen die in alle browsers en apparaten standaard aanwezig zijn. Deze hoeven dan ook nooit apart geladen te worden.
Er zijn nog geen reacties. Wees de eerste..!!