Hoe Google Web Fonts in WordPress-thema’s op de “juiste” manier toe te voegen

Google-lettertypen zijn een geweldige gratis bron voor webontwerpers. In WPBv4 zijn we begonnen met het gebruik van een populaire Google Font-combinatie: Oswald en Lora. Sommige van onze gebruikers hebben ons gevraagd hoe we Google Web-lettertypen in WordPress-thema’s kunnen toevoegen. Als je het je herinnert, hebben we laten zien hoe je Google-lettertypen kunt toevoegen in WordPress Post Editor. In dit artikel laten we u zien hoe u Google Web Fonts toevoegt aan uw WordPress-thema’s JUISTE manier, geoptimaliseerd voor prestaties.


Zoek de Google-weblettertypen die u leuk vindt

Het eerste dat u hoeft te doen, is een Google-lettertype vinden dat u bevalt. Ga naar Google-lettertypen en blader door de bibliotheek. Wanneer u het gewenste lettertype heeft gevonden, klikt u op “Snel te gebruiken” knop.

Gebruik snel lettertypen van Google Fonts

Zodra u op de snelgebruikknop klikt, wordt u naar een nieuwe pagina geleid. Blader naar beneden tot je het gebruiksinstructievak met code ziet dat je aan je website kunt toevoegen.

Google font embed code

U zult zien dat er drie verschillende tabbladen zijn om het lettertype aan uw site toe te voegen. De eerste is de standaard en aanbevolen methode om Google-lettertypen aan uw site toe te voegen. Het tweede tabblad gebruikt de @import CSS-methode en het laatste tabblad gebruikt de JavaScript-methode.

We laten u zien hoe u elk van deze methoden kunt gebruiken en wat de voor- en nadelen zijn.

Video-instructies

Abonneer u op WPBeginner

Als je de video niet leuk vindt of meer instructies nodig hebt, lees dan verder.

Google Web Fonts toevoegen aan WordPress-thema’s

We hebben vooral mensen gezien die de eerste twee methoden gebruikten.

De eenvoudigste manier is om je thema’s te openen style.css bestand en plak de lettertypencode die je op het tabblad @import hebt, zoals dit:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

U kunt ook meerdere lettertypeverzoeken combineren in één. Hier is hoe je het zou doen:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Deze methode is supereenvoudig, maar het is niet de beste manier om Google-lettertypen toe te voegen aan uw WordPress-site. Het gebruik van de @import-methode blokkeert parallelle downloads, wat betekent dat de browser wacht tot het geïmporteerde bestand klaar is met downloaden voordat de rest van de inhoud wordt gedownload.

Als u @import MOET gebruiken, combineer dan op zijn minst meerdere verzoeken in één.

Voor prestaties geoptimaliseerde methode voor het toevoegen van Google-weblettertypen

De beste manier om Google-lettertypen toe te voegen, is door de standaardmethode te gebruiken die de linkmethode gebruikt in plaats van de importmethode. Neem gewoon uw font-URL die u uit stap 1 hebt verkregen. Als u meerdere fonts toevoegt, kunt u de twee fonts combineren met een | karakter. Plaats vervolgens de code in het hoofdgedeelte van uw thema.

U zult waarschijnlijk uw header.php-bestand moeten bewerken en de volgende code boven uw hoofdstijlblad plakken. Het voorbeeld ziet er als volgt uit:

Het doel is in feite om het lettertype zo vroeg mogelijk in te dienen. Volgens het Google Web Fonts-blog zal Internet Explorer, als er een scripttag vóór de @ font-face-declaratie staat, niets op de pagina weergeven totdat het fontbestand is gedownload.

Als je dat eenmaal hebt gedaan, kun je het gewoon als volgt gebruiken in het CSS-bestand van je thema:

h1 {
font-family: ‘Oswald’, Helvetica, Arial, serif;
}

Nu zijn er veel themakaders en kindthema’s. Het wordt NIET aanbevolen om de bestanden van je ouderthema speciaal te wijzigen als je een themakader gebruikt, omdat je wijzigingen de volgende keer dat je dat kader bijwerkt, worden overschreven. U moet de haken en filters gebruiken die door dat bovenliggende thema of dat raamwerk worden gepresenteerd om Google-lettertypen correct toe te voegen aan uw kindthema’s.

Google-lettertypen op de juiste manier in wachtrij plaatsen in WordPress

Een andere manier om Google-lettertypen toe te voegen aan uw WordPress-site, is door het lettertype in de lijst te plaatsen van het functions.php-bestand van uw thema of een sitespecifieke plug-in.

functie wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Vergeet niet de lettertypelink te vervangen door die van jezelf.

Google-lettertypen laden met JavaScript

Voor deze methode moet u de code kopiëren op het JavaScript-tabblad in het gedeelte met instructies voor het gebruik van Google-lettertypen. U kunt deze code direct na de tag in het header.php-bestand van uw thema of kinderthema plakken.

Onze laatste tip over het gebruik van Google Web Fonts op uw site zou zijn om geen fonts te laden die u niet gebruikt. Als u bijvoorbeeld alleen het vetgedrukte en normale gewicht wilt, voeg dan niet alle andere stijlen toe.

We hopen dat dit artikel u heeft geholpen Google Web Fonts op de juiste manier toe te voegen aan uw WordPress-thema’s, zodat uw site snel kan laden. Misschien wilt u ook onze handleiding raadplegen over het toevoegen van Typekit-lettertypen in WordPress.

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