Hoe Google-lettertypen lokaal in WordPress te laden: een optimalisatie-item gevonden in GTmetrix, Pingdom en Google PageSpeed ​​Insights

Als uw WordPress-site dat heeft Google Font fouten in GTmetrix/Pingdom, het lokaal laden van Google Fonts zou ze moeten repareren.


U kunt bepaalde externe bronnen en scripts niet beheren, waardoor ze onmogelijk kunnen worden gecomprimeerd, verkleind of geoptimaliseerd. Dit kan uw WordPress-snelheid ernstig beïnvloeden. Een van de meest voorkomende externe bronnen zijn Google Fonts. Als u al een cacheplug-in zoals WP Rocket of WP Fastest Cache hebt geconfigureerd, kunt u externe bronnen zoals lettertypen gaan opmerken die van invloed zijn op cijfers + laadtijden. Dit is waar het lokaal laden van Google Fonts in het spel komt. Hierdoor kan uw cacheplug-in alle bronnen met betrekking tot uw aangepaste lettertype (n) comprimeren.

Maak een volledige back-up van uw site (of in ieder geval de bestanden die u bewerkt) voordat u wijzigingen aanbrengt.

Google-lettertypen-GTmetrix

Stap 1: Kies een Google-lettertype

In dit voorbeeld gebruiken we Roboto-lettertype met twee lettertypegewichten: normaal (400) en vet (700).

Google-lettertypen-selectie

Gebruik minder Google-lettertypen – houd uw Google-lettertypen tot een minimum beperkt (minder lettertypen = minder verzoeken).

Wees selectief met lettergewichten – het aantal gewichten heeft ook invloed op de laadtijden. Als je alleen de vetgedrukte versie nodig hebt, schakel dan de andere gewichten uit, zodat Google Fonts alleen die laadt die je nodig hebt.

Stap 2: Download het lettertype

Download de lettertypen wanneer je er klaar voor bent. Google downloadt automatisch alle lettertypegewichten, dus de selectie van lettertypegewichten is niet vereist bij deze stap, maar is vereist in stap 3.

Google-lettertypen downloaden

Stap 3: converteer lettertypen naar weblettertypen

Vervolgens zetten we deze lettertypebestanden (.ttf) om naar weblettertypebestanden. Ik gebruik Transfonter. Ga naar hun site, klik Lettertypen toevoegen, dan upload alleen de lettertypes die u op uw website gaat gebruiken. Ik gebruik Roboto-Regular.ttf en Roboto-Bold.ttf dus ik heb zowel gewone als gedurfde gewichten. Laat de instellingen standaard, aangezien WOFF en WOFF2 alle belangrijke browsers omvatten. Klik nu op converteren.

Transfonter-Google-Font-Conversion

Selecteer alleen de lettertypen die u op uw website gaat gebruiken …

Google-lettertypen-conversie-selectie

Stap 4: Download geconverteerde lettertypebestanden

Zodra de lettertypen zijn geconverteerd, kunt u ze downloaden. In het zipbestand bevat elk lettertype WOFF- en WOFF2-formaten (aangezien we 2 lettertypen hebben gedownload, hebben we in totaal 4 lettertypebestanden).

WOFF-Google-Font-Conversion

Stap 5: Upload lettertypebestanden naar WordPress-bestanden

Upload de weblettertypebestanden via FTP of cPanel, idealiter in de wp-content / uploads map zodat het thema en de kernupdates ze niet overschrijven. Ik heb een map met “lettertypen” gemaakt en deze daar geüpload (om ze van andere bestanden te scheiden). Om te bevestigen dat ze met succes zijn geüpload en dat u de juiste links heeft, opent u de links in uw browser en moeten de lettertypen beginnen te downloaden.

Voorbeeld:

  • http://uwwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://uwwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://uwwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://uwwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Vervangen uwwebsite.com met uw eigen website (en HTTPS als u SSL gebruikt). Test in het ideale geval alle 4 de links en zorg ervoor dat de URL’s correct zijn (en bewaar ze ook ergens).

Stap 6: voeg een aangepast lettertype toe aan CSS

Vervolgens voegen we de CSS toe die je hebt gekregen in het gedownloade zip-bestand met de naam stylesheet.css. Dit is de CSS-code die uw lettertypen verbindt met uw bestaande CSS en ze gebruiksklaar maakt.

Waar de CSS-code moet worden geplaatst, is subjectief, maar u kunt een externe stylesheet of de WordPress gebruiken ‘ wp_enqueue_style functie in functies.php, of aan het begin van uw style.css bestand (of custom.css als je er een hebt). Ik plak het in het standaard style.css-bestand van het thema. Kopieer / plak de code in het stylesheet en verander eventuele relatieve URL’s in absolute URL’s.

Standaard-URL’s in stylesheet.css:
src: url (‘Roboto-Bold.woff2’) formaat (‘woff2’),
url (‘Roboto-Bold.woff’) formaat (‘woff’);

Verander deze in:
src: url (‘http://uwwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) formaat (‘ woff2 ‘),
url (‘http://uwwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) formaat (‘ woff ‘);

Voeg in feite gewoon de map-URL toe vóór de bestandsnaam van het lettertype.

Dit is optioneel, maar maak desgewenst een aangepaste klasse om het lettertype gemakkelijk in bestaande HTML te gebruiken. Hier hebben we onze klassen genoemd roboto_font en roboto_bold_font. Om dit te doen, voegt u dit toe aan uw style.css-bestand (na de bovenstaande code):

.roboto_font {

font-family: “Roboto”, “Arial”, schreefloos;

}

.roboto_bold_font {

font-family: “Roboto”, “Arial”, schreefloos;

font-weight: bold;

}

Stap 7: Test het lettertype

Maak nu een testpagina en plaats de volgende code in de Teksteditor

Testen

Aangepaste lettertype-test

Aangepaste lettertype-test

Google-lettertypen testen

Bekijk een voorbeeld van de pagina. Als je het goed hebt gedaan, zou je het nieuwe aangepaste lettertype moeten zien! De eerste kop is het standaardlettertype van uw website, de tweede en derde zijn de Google Fonts-lettertypen die we hebben toegevoegd:

Local-Google-Fonts

Stap 8: stel het standaardlettertype in

Om dit het standaardlettertype van uw website te maken, voegt u deze CSS toe aan uw style.css-bestand:

lichaam {

font-family: “Roboto”, “Arial”, schreefloos;

}

Wees voorzichtig! Als u al een aangepast lettertype hebt, wordt het mogelijk niet correct weergegeven en moet u debuggen of bestaande eigenschappen van de lettertypefamilie debuggen en deze vervangen door deze.

Stap 9: Zorg altijd voor font-fallbacks

Het is een slechte gewoonte om een ​​Google-lettertype toe te passen als een lettertypefamilie. In plaats daarvan moet u meerdere lettertypen hebben gespecificeerd, inclusief de gebruikelijke lettertypen zoals Arial, Times New Roman, zodat de browser kan terugvallen op deze lettertypen voor het geval het lettertype niet wordt geladen of het langer duurt om te laden.

Zonder terugval:
font-family: ‘Roboto’;

Met fallback-lettertype:
font-family: ‘Roboto’, Arial, schreefloos;

Als het je Google-lettertypen niet laadt, valt de browser terug naar het Arial-lettertype of het standaard schreefloze lettertype van het systeem en veroorzaakt het geen problemen met het renderen van het lettertype.

Test uw website opnieuw (in GTmetrix)

Je zou er geen Google Fonts-fouten in moeten zien …

Nieuw-GTmetrix-Report.png

Vragen hebben? Stuur me een bericht.

Veel Gestelde Vragen

&# x2705; Hoe versnelt u Google Fonts?

Door Google-lettertypen te combineren, ze lokaal te hosten en ze vooraf te verbinden en te prefecten, kunnen ze allemaal hun laadtijden verbeteren. Controleer uw GTmetrix-waterval om een ​​benchmark van uw lettertypen te krijgen en test deze na optimalisatie opnieuw.

&# x2705; Hoe lettertypen de weblettertypebestanden te converteren?

We gebruiken Transfonter.

&# x2705; Hoe zit het met aangepaste fonts van Elementor?

Elementor Custom Fonts kunnen ook lokaal Google Fonts hosten en is ingebouwd in Elementor Pro. U kunt dit gebruiken om uw lettertypebestanden te uploaden.

&# x2705; Welke plug-ins helpen bij het optimaliseren van lettertypen?

WP Rocket, OMGF, Autoptimize en Perfmatters kunnen u allemaal helpen bij het optimaliseren van lettertypen.

&# x2705; Hoe zit het met het vooraf ophalen en vooraf verbinden van lettertypen?

Deze kunnen lettertypen versnellen door browsers te helpen er beter op te anticiperen. We gebruiken de Perfmatters-plug-in van Kinsta om fonts vooraf op te halen en vooraf aan te sluiten, maar je kunt ook WP Rocket of de Pre Party Resource Hints-plug-in gebruiken.

Proost,
Usama

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map