Het is eenvoudig om Google Fonts te gebruiken in WordPress. Het is een gratis gids met meer dan 800 webfonts die je op je website kunt gebruiken. De Google Fonts-service is een gratis service van topkwaliteit die door miljoenen WordPress-websites wordt gebruikt om het uiterlijk en de bruikbaarheid van hun website te verbeteren. Hier lees je hoe je Google fonts op WordPress kunt gebruiken zonder de prestaties van je site aan te tasten en je PageSpeed scores te verbeteren.
Methode 1: Host Google Fonts op uw WordPress Server
Stap 1: Kies een Google-lettertype
Als u minder Google Fonts gebruikt, zijn er minder aanvragen (minder fonts = minder aanvragen).
Selecteer lettertypegewichten zorgvuldig - Het aantal lettertypegewichten dat u gebruikt, heeft ook invloed op de snelheid waarmee uw pagina laadt. Om ervoor te zorgen dat Google Fonts alleen de gewichten laadt die je nodig hebt, vink je de anderen uit zodat alleen de gevolgen die je nodig hebt worden ingepakt.
Stap 2: Het lettertype downloaden
Het downloaden van het lettertype is de tweede stap in het proces. Het is belangrijk op te merken dat Google automatisch alle lettertypegewichten downloadt, dus het selecteren van lettertypegewichten is in dit stadium niet nodig. In plaats daarvan is de selectie van lettertypegewichten nodig voor stap drie.
Stap 3: Lettertypen converteren naar weblettertypen
Klik op de knop Add Fonts op hun site, selecteer alleen lettertypes die je op je website gaat gebruiken, en upload ze. Het is een roboto-regular.ttf bestand en een roboto-bold.ttf bestand, dus beide gewichten zijn inbegrepen. Aangezien WOFF en WOFF2 alle belangrijke browsers dekken, laat u de instellingen zoals ze zijn. Klik op de knop Converteren om het conversieproces te beginnen.
Stap 4: Geconverteerde lettertypebestanden downloaden
Zodra de lettertypen zijn geconverteerd, kunt u ze downloaden. Aangezien er twee lettertypen zijn gedownload naar onze computer, zullen we in totaal 4 lettertypebestanden in het zip-bestand hebben (aangezien we twee lettertypen hebben gedownload, zullen we vier lettertypebestanden in het zip-bestand hebben).
Stap 5: Fonts uploaden naar WordPress bestanden
Zorg ervoor dat de webfont bestanden worden geupload via FTP of cPanel, idealiter in de wp-content/uploads map, om te voorkomen dat ze worden overschreven door thema en core updates. We hebben de fonts geupload in een "fonts" map (zodat ze gescheiden zijn van andere bestanden). U zou de fonts moeten kunnen downloaden nadat u de links in uw browser hebt geopend, zodat u kunt bevestigen dat ze met succes zijn geüpload.
Stap 6: Aangepast lettertype toevoegen aan CSS
Na het downloaden van het zip-bestand voegen we de stylesheet.css CSS toe in het bestand. De CSS-code hieronder verbindt uw lettertypen met uw bestaande CSS en maakt ze beschikbaar.
Je kunt de CSS code in functions.php plaatsen of je style.css bestand beginnen. Een extern CSS bestand of de wp_enqueue_style functie van WordPress kan gebruikt worden in de CSS code. In het standaard style.css bestand van het thema plakken we deze. Vervang eventuele relatieve URL's door absolute URL's door de code te kopiëren/plakken in het stylesheet.
Thema standaard URL's in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Veranderen in:
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 gemakkelijk te gebruiken in de huidige HTML, maak je een aangepaste klasse. 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;
font-weight: bold;
}
Stap 7: Het standaardlettertype instellen
Om van dit lettertype het standaardlettertype op uw website te maken, moet u de CSS-code opnemen in uw style.css-bestand.
Mogelijk moet u het lettertype debuggen of bewerken om de bestaande font-family eigenschappen te vervangen.
De volgende stap is om het verkregen stylesheet.css bestand te uploaden in je bestand stylesheet.css en de CSS toe te voegen. De onderstaande CSS-code zal ervoor zorgen dat uw lettertypen werken met uw bestaande CSS en klaar zijn voor gebruik zodra u deze invoert. U kunt een extern stylesheet gebruiken of de WordPress-functie wp_enqueue_style om stylesheets te enqueuen.
Methode 2: Web Fonts vooraf laden - Boven de vouw optimalisatie
Als u Google Fonts gebruikt, moet u wellicht verwijzen naar het stylesheet dat door Google is opgesteld en vanaf de servers van Google naar uw WordPress-website is gestuurd. Wanneer u het ontwikkelaarstool van Google Chrome gebruikt om uw website te inspecteren, kunt u een glimp opvangen van het proces achter de schermen. Mogelijk ziet u twee vermeldingen voor Google Fonts binnen Source.
Zie de foto die hier is bijgevoegd.
Wanneer je op de link fonts.googleapis klikt, zul je zien dat het stylesheet waarvoor je de URL hebt gemaakt, wordt getoond op de geopende pagina. Bovendien wordt voor elke font-face declaratie een oproep gedaan naar het specifieke font-bestand.
Dit geeft aan dat de gebruiker fonts.gstatic.com moet bezoeken om het benodigde gewicht voor het lettertype te krijgen als een ander font-gewicht wordt gebruikt. Deze stap kan de laadtijd van je WordPress pagina verlengen.
Ga daarom naar het bestand functions.php voor uw huidige thema, en voer de volgende PHP-code in binnen de functie die verantwoordelijk is voor het beheer van lettertypen.
functie twentyeleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
"href" => "https://fonts.gstatic.com",
"crossorigin,
);
}
$urls;
}
add_filter( "wp_resource_hints", "twentyeleven_resource_hints", 10, 2 );
Methode 3: Google Fonts WordPress optimaliseren met behulp van de plugin
Plugins maken het, zoals bij de meeste WordPress-gerelateerde taken, veel eenvoudiger om Google Fonts te optimaliseren. Bovendien zorgen ze voor het software-aspect voor u, zodat u zich geen zorgen hoeft te maken over waar de code in het systeem moet komen.
Als u Google Fonts op uw WordPress-website hebt geïnstalleerd en een prestatietest uitvoert met PageSpeed Insights of GTmettrix, krijgt u de volgende foutmelding: fonts.googleapis.com.
Dit gebeurt omdat Google Fonts niet compatibel zijn met het WordPress platform. Het geeft aan dat uw WordPress site zijn Google Fonts moet laten optimaliseren.
Een gratis plugin kan worden gebruikt voor de fixatie van hetzelfde. Het is - OMGF | Host Google Fonts Locally
Na het voltooien van de installatie zal de plugin onmiddellijk beginnen met het overschakelen van de WordPress wp en queue script()Google Fonts methode naar de wp head() functie. Deze plugin doet alles zelf.
Vind meer van dit soort artikelen bij Seahawk Media.
