Het is eenvoudig om Google Fonts in WordPress te gebruiken. Het is een gratis catalogus met meer dan 800 weblettertypen die je op je website kunt gebruiken. De Google Fonts-service is een zeer gewaardeerde gratis service die door miljoenen WordPress-websites wordt gebruikt om het uiterlijk en de gebruiksvriendelijkheid van hun website te verbeteren. Hier lees je hoe je Google Fonts in WordPress kunt gebruiken zonder de prestaties van je website te beïnvloeden en je PageSpeed- score te verbeteren.
Methode 1: Google Fonts hosten op je WordPress-server
Stap 1: Kies een Google-lettertype
Door minder Google Fonts te gebruiken, verlaag je het aantal verzoeken (minder lettertypen = minder verzoeken).
Kies je lettertypegewichten zorgvuldig – Het aantal lettertypegewichten dat je gebruikt, heeft ook invloed op de laadsnelheid van je pagina. Om ervoor te zorgen dat Google Fonts alleen de gewichten laadt die je nodig hebt, schakel je de andere gewichten uit, zodat alleen de gewenste gewichten worden geladen.
Stap 2: Download het lettertype
Het downloaden van het lettertype is de tweede stap in het proces. Het is belangrijk om te weten dat Google automatisch alle lettertypegewichten downloadt, dus het selecteren van lettertypegewichten is in deze fase niet nodig. De selectie van lettertypegewichten is pas nodig in stap drie.
Stap 3: Lettertypen converteren naar weblettertypen
Klik op de knop 'Lettertypen toevoegen' op hun site, selecteer alleen de lettertypen die u op uw website wilt gebruiken en upload ze. Het betreft een roboto-regular.ttf-bestand en een roboto-bold.ttf-bestand, dus beide varianten zijn inbegrepen. Aangezien WOFF en WOFF2 alle belangrijke browsers ondersteunen, kunt u de instellingen ongewijzigd laten. Klik op de knop 'Converteren' om het conversieproces te starten.
Stap 4: Download de geconverteerde lettertypebestanden
Zodra de lettertypen zijn geconverteerd, kunt u ze downloaden. Omdat er twee lettertypen naar onze computer zijn gedownload, zullen er in totaal 4 lettertypebestanden in het zipbestand zitten (omdat we twee lettertypen hebben gedownload, zullen er vier lettertypebestanden in het zipbestand zitten).
Stap 5: Lettertypebestanden uploaden naar WordPress-bestanden
Zorg ervoor dat de webfontbestanden via FTP of cPanel , bij voorkeur in de map wp-content/uploads, om te voorkomen dat ze worden overschreven door thema- en core-updates. We hebben de fonts geüpload naar een map genaamd "fonts" (zodat ze gescheiden zijn van andere bestanden). Je zou de fonts moeten kunnen downloaden nadat je de links in je browser hebt geopend, zodat je kunt controleren of ze succesvol zijn geüpload.
Stap 6: Voeg een aangepast lettertype toe aan CSS
Na het downloaden van het zipbestand voegen we het CSS-bestand stylesheet.css toe aan het bestand. De onderstaande CSS-code koppelt je lettertypen aan je bestaande CSS en maakt ze beschikbaar.
Je kunt de CSS-code in functions.php plaatsen of beginnen met je style.css-bestand. Je kunt een extern CSS-bestand of de wp_enqueue_style-functie van WordPress gebruiken in de CSS-code. We plakken de code in het standaard style.css-bestand van het thema. Vervang alle relatieve URL's door absolute URL's door de code te kopiëren en in het stylesheet te plakken.
Standaard URL's van het thema in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Wijzigen naar:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
Om het lettertype eenvoudig in de huidige HTML te gebruiken, kunt u een aangepaste CSS-klasse aanmaken. Gebruik hiervoor de CSS-klassen `roboto_font` en `roboto_bold_font` .
.roboto_font {
font-family: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
font-family: “Roboto”, “Arial”, sans-serif;
lettertypegewicht: vetgedrukt;
}
Stap 7: Stel het standaardlettertype in
Om dit lettertype als standaardlettertype op uw website in te stellen, moet u de CSS-code in uw style.css-bestand opnemen.
Mogelijk moet u het lettertype debuggen of bewerken om bestaande eigenschappen van het lettertype te vervangen.
De volgende stap is het uploaden van het bestand stylesheet.css dat je hebt verkregen naar de map met de naam stylesheet.css en het toevoegen van de CSS. De onderstaande CSS-code zorgt ervoor dat je lettertypen werken met je bestaande CSS en direct klaar zijn voor gebruik. Je kunt een extern stylesheet gebruiken of de WordPress-functie wp_enqueue_style om stylesheets toe te voegen.
Methode 2: Weblettertypen vooraf laden – Optimalisatie voor het bovenste gedeelte van de pagina
Als je Google Fonts gebruikt, moet je mogelijk het stylesheet raadplegen dat door Google is gemaakt en vanaf de servers van Google naar je WordPress-website is verzonden. Wanneer je de ontwikkelaarstools van Google Chrome gebruikt om je website te inspecteren, krijg je mogelijk een kijkje in het proces achter de schermen. Het is mogelijk dat je twee vermeldingen voor Google Fonts in de broncode ziet.
Bekijk de bijgevoegde afbeelding.
Wanneer je op de fonts.googleapis , zie je dat het stylesheet waarvoor je de URL hebt gegenereerd, op de geopende pagina wordt weergegeven. Bovendien wordt voor elke font-face-declaratie een oproep gedaan naar het specifieke lettertypebestand.
fonts.gstatic.com moet bezoeken om het benodigde gewicht voor het lettertype te verkrijgen als er een ander lettertypegewicht wordt gebruikt. Deze stap kan de laadtijd van uw WordPress-pagina verlengen.
Open daarom het functions.php-bestand van je huidige thema en voeg de volgende PHP-code toe aan de functie die verantwoordelijk is voor het beheren van lettertypen.
functie twentyeleven_resource_hints( $urls, $relation_type ) {
als ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'kruisoorsprong'
);
}
retourneer $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Methode 3: Google Fonts optimaliseren voor WordPress met behulp van een plugin
Plugins maken, net als bij de meeste WordPress-gerelateerde taken, het optimaliseren van Google Fonts een stuk eenvoudiger. Bovendien nemen ze het softwarematige aspect voor je uit handen, zodat je je geen zorgen hoeft te maken over waar de code in het systeem geplaatst moet worden.
Als je Google Fonts op je WordPress-website hebt geïnstalleerd en een prestatietest uitvoert met PageSpeed Insights of GTmettrix, krijg je de volgende foutmelding: fonts.googleapis.com.
Dit probleem treedt op omdat Google Fonts niet compatibel zijn met het WordPress-platform. Het geeft aan dat de Google Fonts van uw WordPress-website geoptimaliseerd moeten worden.
Hiervoor kan een gratis plugin worden gebruikt: OMGF | Host Google Fonts Locally.
Na de installatie zal de plugin direct de WordPress-methode `wp en queue script()Google Fonts` vervangen door de `wp head()`-functie. Deze plugin doet dit volledig zelfstandig.
Meer van dit soort artikelen vind je op Seahawk Media .
