In deze stapsgewijze handleiding ga ik je helpen Google Fonts lokaal te hosten via CSS en zorg er voor dat ze niet meer extern worden geladen. Hierdoor heb je een snellere website, minder DNS-lookups en minder HTTP-reuests. Op deze manier kun jij je paginascore verhogen. Wij konden 33% van de laadtijd van onze website afhalen door de Google Fonts lokaal te hosten. Maar er zijn ook nadelen, gewoon blijve lezen …
- Wat zijn Google Fonts
- Waarom Google Fonts gebruiken
- De nadelen van Google Fonts en het lokaal hosten daarvan
- Stap-voor-stap handleiding om Google Fonts lokaal te hosten
- Verwijder het bericht ‘Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen’
- Conclusie
Wat zijn Google Fonts?
Google Fonts is in 2010 initieel gelanceerd als ‘Google Web Fonts’ en dit zegt eigenlijk alles. Een Google Font is een Web Font van…. je raadt het al: Google!
Dit open source lettertypen bibliotheek van Google is veruit de meest populaire bibliotheek ter wereld. Een snelle blik op de analytics zal je verbaasd doen staan. Wij hebben een snapshot voor je gemaakt
Waarom Google Fonts te gebruiken?
Het kiezen van het juiste lettertype voor jouw website is cruciaal voor een mooi ontwerp. Google Fonts biedt een gigantische selectie van maarliefst 916 verschillende lettertypen. Dat zou je genoeg keuze moeten beiden. Het gekozen lettertype zal bij voorkeur de leesbaarheid en gebruikerservaring vergroten en is cruciaal voor het beter overbrengen van de boodschap aan jouw bezoekers. Het nadeel van dit alles is echter dat het kan leiden tot een vermindering van de prestaties van de websitesnelheid. Laten we wat verder graven.
Greet your guests in style on your Smart TV.Give your guests that extra something by dynamically greeting them and giving them the information they need.
Check out Simplify Screen
De nadelen van Google Fonts en het lokaal hosten hiervan
Net als elk ander weblettertype, zijn de lettertypen van Google niet vooraf geïnstalleerd op een apparaat (computer, tablet, telefoon, enz.) Ze worden door de browser eerst gedownload voordat ze worden weergegeven. Het gebruikte webfont is een extra HTTP-request, en ook een andere DNS-Lookup. Je hebt eerst fonts.googleapis.com om het CSS-bestand te verkrijgen en vervolgens font.gstatic.com om deze te downloaden. En elke bezoeker moet deze bestanden downloaden bij het laden van de pagina … Wanneer je Google Fonts lokaal host, zullen deze requests gaan aan hetzelfde domein als alle andere bestanden die je nodig hebt om jouw pagina te laden. En waarschijnlijk heb je het extra CSS-bestand ook niet nodig.
Het lokaal hosten van Google Fonts betekent niet per definitie dat de paginasnelheid zal verbeteren. Allereerst kunnen deze lettertypen al in de cache van de computer van jouw bezoeker zijn opgeslagen. Dit gebeurd wanneer hij een andere webpagina bezoekt die hetzelfde lettertype gebruikt als jij.
Daarnaast, als je geen CDN gebruikt zoals Cloudflare of KeyCDN (vooral doen!), kun je de website uiteindelijk zelfs vertragen door de Google Fonts lokaal te hosten. Enn CDN vermindert het aantal DNS-lookups en verhoogt de snelheid van een website. Het is hiervoor ontworpen. En Google, ja het is Google, doet dit natuurlijk ook. Om die rede, laden hun lettertypen relatief snel als je dat vergelijkt met het downloaden van bestanden van middelmatige servers. Wij adviseren om Google Fonts niet lokaal te hosten als je geen CDN gebruikt.
Stap voor stap handleiding om Google Fonts lokaal te hosten
Stap 0: Laten we snel een test doorvoeren om te kijken waar we staan
We gebruiken GT Metrix om de informatie te krijgen die we willen voordat we beginnen. OK … de belangrijke cijfers voor ons zijn dat wein totaal 71 HTTP-Requests hebben, onze pagina 1.56MB groot is en we zijn volledig geladen in 3.1 seconden. Dat moet beter kunnen. Volg de onderstaande tutorial en kijk wat het ons brengt.
Stap 1: Bekijk welke Fonts je gebruikt
Op hetzelfde prestatierapport kunnen we zien welke lettertypen ook daadwerkelijk worden geladen. Navigeer naar het tabblad ‘Waterfall’ en zoek naar fonts.gstatic.com. Door met onze muis over de regels te bewegen, leren we dat wij ‘Lato’ gebruiken als onze Google Font.
Stap 2: Download de Font bestanden die je nodig hebt
Als je naar de website van Google Fonts gaat, kun je alle gewenste lettertypen selecteren en downloaden. Maar hier komen deze als een .ttf-bestand. Je hebt dan een converter nodig om een andere, meer modernere compressie te krijgen zoals .woff en .woff2. Laten we het een beetje makkelijker maken, zullen we?
De beste manier om de Google Fonts te downloaden, is om de gratis Google Webfonts Helper tool te gebruiken. Kies het gewenste lettertype en selecteer vervolgens de gewenste stijlen. Voor ons is dit het lettertype ‘Lato’ in de stijlen ‘Regular (400)’ en ‘Bold (700)’. We hebben ook beide tekensets ‘Latin’ en ‘Latin-ext’ nodig.
Met deze gratis service kun je de lettertypen in verschillende bestandsformaten downloaden door de optie te kiezen voor ‘Best Support’ of voor ‘Modern Browsers’. Met ‘Best Support’ ontvang je alle bestandstypen, waar de ‘Modern Browsers’-variant dit beperkt tot enkel de meest gecomprimeerde .woff- en .woff2 formaten. En deze laatste optie is wat we willen.
Vervolgens zie je dat je automatisch de jusite CSS-code krijgt om de lettertypen op te vragen. Kopieer de CSS naar je klembord en download de lettertypebestanden.
Stap 3: Upload de lettertypebestanden naar de server
Daarna neem je de bestanden die je zojuist hebt gedownload en uploadt deze naar jouw server via FTP. Wij hebben een nieuwe map met de naam ‘fonts’ gemaakt en hierin de lettertypen geüpload.
Stap 4: Voeg de lettertypen toe aan jouw CSS
Nu we over alle juiste bestanden beschikken,zal je ernaar moeten verwijzen via CSS. Met veel WordPress thema’s kun je eigen CSS gemakkelijk toevoegen aan de site, maar als dat niet het geval is, kun je dit ook in het Child-thema plaatsen. Plak de CSS die je eerder hebt gekopieerd naar je klemboard nu in je stylesheet.
/* lato-700 - latin_latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'),
url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-regular - latin_latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}Ik hoor je denken, ‘een CDN is niet lokaal, toch?’ Welnu, voor zover de bestanden afkomstig zijn van een andere server, worden deze alsnog beschouwd als jouw lokale bezittingen. En al jouw andere bestande zullen sowieso al van dezelfde CDN-server afkomstig zijn. In dit geval kun je dus gerust zeggen dat je ‘Google Fonts lokaal host’ en je hebt dit gedaan met CSS.
Greet your guests in style on your Smart TV.Give your guests that extra something by dynamically greeting them and giving them the information they need.
Check out Simplify Screen
Last but not least, nu zul je om dit nieuwe ‘lettertype’ moeten vragen. Je kunt zoveel CSS-klassen toevoegen als je nodig hebt. Soms moet je eerst pagina inspecteren om te zien welke CSS-klassen om deze lettertypen vragen. En deze vervolgens aan de lijst toevoegen. Voor nu beperken we ons tot de basis zoals hieronder staat afgebeeld.
body {font-family:'Lato', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Lato', Arial, sans-serif;}Stap 5: Laten we kijken waar we staan
Dus, door de stappen te volgen scoort onze pagina behoorlijk wat beter. We hebben onze HTTP-Requests verminderd met ‘2’, 0,34 MB van de totale paginagrootte afgehaald en dit samen resulteerde in een vermindering van de laadtijd van 1 totale seconde, een verbetering van 33%!
Verwijder het bericht ‘Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen’
Als we toch al bezig zijn, kunnen we net zo goed van deze boodschap af. Wanneer je PageSpeed Insights gebruikt om jouw site te meten, heb je de melding ‘Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen’ waarschijnlijk al eens gezien
Laten we deze melding weghalen! In de CSS van voorheen kunnen we eenvoudig ‘font-display: swap;’ toevoegen en dit herhalen voor alle lettertypen die je gebruikt. De code ziet er dan als volgt uit:
/* lato-regular - latin_latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'),
url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}font-display:swap; Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
Conclusie
Door de Google Fonts lokaal te hosten via CSS, is de laadtijd van onze pagina met 33% verminderd en het formaat van de pagina met 0,34 MB verkleind. In sommige gevallen is dit zeker juiste stap. Voor ons is dit een grote verbetering, maar laten we eerlijk zijn, we begonnen al met een vrij snelle site.
Als jouw website veel langzamer is, dan is mijn advies om te beginnen met het optimaliseren van andere dingen, afhankelijk van wat de analyse zegt.
En zoals eerder al gezegd, deze stap is ook alleen maar logisch als je een CDN gebruikt. Hier bij Simplify Everything gebruiken we zowel een snelle server als ook een CDN om onze sites te turbo chargen. Misschien neem je eens een kijkje in onze portfolio om te zien wat we voor jou kunnen doen.
Deze site wordt beschermd door reCAPTCHA en Google's Privacybeleid en Servicevoorwaarden zijn van toepassing.