Hoe Google Fonts lokaal te hosten via CSS -Tutorial

Laatst bijgewerkt: oktober 16, 2019

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?

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.

Communiceer beter met uw gasten / werknemers!
Maak van elk scherm een dynamisch scherm

Bekijk de Simplify Box

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.

bron: GT Metrix

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.

bron: GT Metrix

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.

bron: Google Webfonts Helper

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.

bron: Google Webfonts Helper

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+ */
}

Zorg ervoor dat de bron-URL correct is. Deze moet verwijzen naar de bestanden die je net hebt geüpload via FTP. Als je een CDN gebruikt, zoals wij KeyCDN gebruiken, zul je de URL moeten wijzigen om naar de CDN te verwijzen. Kleine opmerking, onze uploads via FTP worden automatisch gekopieerd naar onze CDN server.

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.

Communiceer beter met uw gasten / werknemers!
Maak van elk scherm een dynamisch scherm

Bekijk de Simplify Box

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

bron: GT Metrix
bron: GT Metrix

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

bron: PageSpeed Insights

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.

Raymond Hollaar

Raymond is a Dutch guy with Hungarian roots, living in Austria. Can you still follow? Apart from loving the outdoor life in the mountains, he spends most of his time indoors playing with computers. He has over 10 years of experience with the design of websites and especially with e-Commerce.

Other posts by the author:

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Je moet onze cookies hebben geaccepteerd voordat je dit formulier kunt verzenden. Als je dit nog niet hebt gedaan, klik dan hier.

Deze site wordt beschermd door reCAPTCHA en Google's Privacybeleid en Servicevoorwaarden zijn van toepassing.