In dit Help-artikel over WordPress zal ik u stap voor stap door het proces leiden van het toevoegen van aangepaste lettertypen aan uw WordPress-blokthema's. Dit betekent dat je ELK lettertype aan ELK thema kunt toevoegen, zoals het toevoegen van Google Fonts aan het Twenty Twenty Three-thema.

U kunt de onderstaande video-tutorial bekijken of deze overslaan en het artikel lezen (dat beschikbaar is in meerdere talen met behulp van de vertaalfuncties op deze pagina). 

Ik laat je zien hoe je deze taak kunt volbrengen met behulp van de Create Block Theme-plug-in die rechtstreeks is ontwikkeld door het WordPress-team van ontwikkelaars. Dit maakt de plug-in ultralicht, krachtig en zeer eenvoudig te gebruiken met blokthema's. Ik laat je ook zien hoe je een veelvoorkomend machtigingsprobleem oplost dat kan optreden bij het werken met deze plug-in.

Met deze methode kunt u naar lettertypen linken (dwz linken naar Google Fonts) of lettertypen lokaal op uw site insluiten (voor betere siteprestaties). Laten we erop ingaan!

Inhoudsopgave

1. Installeer de plug-in "Create Block Theme".

Om te beginnen logt u in op uw WordPress-beheerdersgebied, dat u naar het dashboard brengt. Ga vanaf daar naar Plug-ins>Nieuwe toevoegen vanuit de hoofdnavigatie (rode pijl in de bovenstaande afbeelding).

Zoek naar de plug-in "Create Block Theme" met behulp van de zoekbalk in de rechterbovenhoek (groen omlijnd in de bovenstaande foto). Zodra de plug-in Create Block Theme wordt weergegeven, klikt u op de knop "Nu installeren" om deze op uw site te installeren (rode pijl).

Klik vervolgens op de knop "Activeren" om de plug-in te activeren.

WordPress vereenvoudigd: cursus krachtige websites bouwen door Davies Media Design

2. Beveiligingsplug-in uitschakelen (tijdelijk)

Om de rest van dit proces soepel te laten verlopen, moet u tijdelijk alle beveiligingsplug-ins uitschakelen die u hebt geïnstalleerd en die gebruikers blokkeren om thema's of plug-ins te bewerken.

In mijn specifieke geval gebruik ik de SG Security-plug-in (die bij alle WordPress-websites wordt geleverd gehost via Siteground - een host die ik ten zeerste aanbeveel). Ik weet zeker dat deze plug-in het proces van het toevoegen van aangepaste lettertypen verstoort, dus ik zal de instelling uitschakelen die in de weg zit.

In dit geval navigeer ik naar het gedeelte "Sitebeveiliging" van de SG Security-plug-in met behulp van de hoofdnavigatie (rode pijl in de bovenstaande afbeelding).

Vervolgens scrol ik omlaag naar de optie met het label "Editor voor thema's en plug-ins uitschakelen" (groen gemarkeerd in de bovenstaande afbeelding). Je ziet een schakelaar rechts van deze optie - klik op de schakelaar om deze functie uit te schakelen (rode pijl). U zou een bericht "Succes" moeten zien verschijnen in de blauwe pijl in de rechterhoek).

Nu onze beveiligingsplug-in tijdelijk is uitgeschakeld, kunnen we doorgaan naar de volgende stap: het selecteren en uploaden van de lettertypen die we op onze site willen gebruiken.

Er zijn twee opties voor het gebruik van aangepaste lettertypen in WordPress.

3. Selecteer aangepaste lettertypen voor WordPress (gekoppelde Google-lettertypen)

De eerste optie is om te linken naar lettertypen op een site van derden, Google Fonts. Deze optie is eenvoudiger en kost minder tijd om in te stellen, maar vertraagt ​​de laadsnelheid van uw website. Het beperkt je ook tot de beschikbare lettertypen van Google Fonts (hoewel Google tal van geweldige, gratis lettertypen biedt). Als je minder technisch onderlegd bent en het niet erg vindt om Google Fonts te gebruiken, raad ik deze optie aan.

Navigeer om te beginnen naar "Uiterlijk> Themalettertypen beheren" vanuit de hoofdnavigatie (rode pijl in de bovenstaande afbeelding).

In het werkgebied "Themalettertypen beheren" ziet u alle standaardlettertypen die momenteel in WordPress zijn geïnstalleerd (groen gemarkeerd in de bovenstaande afbeelding). Uw lettertypen worden ook weergegeven aan de rechterkant van het werkgebied, samen met de verschillende variaties van elk lettertype en de bestandsgrootte voor elke lettertypevariatie (blauw omlijnd).

Om een ​​nieuw lettertype aan uw thema toe te voegen, klikt u op de knop "Google-lettertype toevoegen" (rode pijl).

Klik op de vervolgkeuzelijst 'Selecteer lettertype' en zoek naar het Google-lettertype dat u aan uw site wilt toevoegen (de lettertypen staan ​​in alfabetische volgorde). Als u niet zeker weet hoe elk lettertype eruitziet, raad ik u aan browsen op de Google Fonts-website om lettertypen te verkennen en uit te testen. Zodra je het lettertype hebt gevonden dat je wilt gebruiken, selecteer je het in de vervolgkeuzelijst (blauwe pijl).

Je ziet nu een lijst met alle beschikbare varianten die je voor dat lettertype op je thema kunt installeren. U kunt het vakje naast individuele varianten aanvinken of op het bovenste selectievakje klikken (rode pijl in de afbeelding hierboven) om alle varianten te selecteren. U ziet een lijst met uw geselecteerde varianten, samen met hun bestandsgrootte, aan de rechterkant van het scherm. Als je klaar bent, klik je op 'Google-lettertypen toevoegen aan je thema' (groene pijl).

U zou nu bovenaan het werkgebied een bericht moeten zien dat het lettertype is geïnstalleerd voor uw thema (in dit geval voor het Twenty-Twenty Three-thema). U kunt dan klikken op de link "Lettertypen beheren" in het berichtvenster voor succes, of op de kleine pijl-terug klikken (rode pijl in de afbeelding hierboven) om terug te keren naar het werkgebied "Themalettertypen beheren".

U ziet nu uw nieuw geïnstalleerde lettertypefamilie vermeld bij de rest van de lettertypen van uw thema (rode pijl in de bovenstaande afbeelding). U ziet ook uw lettertypefamilie en alle bijbehorende lettertypevariaties aan de rechterkant van het werkgebied (groen gemarkeerd).

4. Sluit aangepaste lettertypen in voor WordPress (lokale lettertypen voor betere SEO)

De tweede optie voor het toevoegen van lettertypen aan uw WordPress-website is om uw lettertypen te "embedden" of "lokaal te hosten". Met andere woorden, uw lettertypebestanden bevinden zich op dezelfde webserver die uw website host.

Het voordeel van deze methode is dat er geen lettertypen van een domein van derden hoeven te worden opgehaald. Hierdoor laden je fonts sneller en dus ook je webpagina sneller. Sneller laden van webpagina's is beter voor de gebruikerservaring, wat betekent dat het uw site kan helpen hoger te scoren in zoekmachines en meer verkeer te genereren.

Met andere woorden, ingesloten lettertypen zijn beter voor SEO (zoekmachineoptimalisatie).

Hoewel deze methode een paar extra stappen vergt, is het nog steeds vrij eenvoudig en gebruikt het dezelfde plug-in die we eerder hebben geïnstalleerd (Create Block Themes-plug-in).

Om uw lettertypen lokaal te installeren, navigeert u eerst naar Uiterlijk>Themalettertypen beheren vanuit de hoofdnavigatie (als u daar nog niet bent vanaf de laatste stap - blauwe pijl in de bovenstaande afbeelding). Klik vervolgens op de knop "Lokaal lettertype toevoegen" in de rechterbovenhoek van het werkgebied (rode pijl).

U wordt naar het gebied "Lokale lettertypen" geleid waar u een bestand van uw computer kunt selecteren om naar uw thema te uploaden. Onder de knop "Bestand kiezen" ziet u een lijst met de ondersteunde bestandsindelingen voor lettertypen. U kunt deze indelingen krijgen van elke vertrouwde lettertypewebsite, inclusief Google Fonts.

Zoek en download uw lettertype naar keuze van Google Fonts

Ik spring naar Google Fonts en gebruik de zoekbalk (rode pijl) om te zoeken naar het lettertype dat ik wil - in dit geval het lettertype "Catamaran". Zodra het lettertype in de resultaten wordt vermeld, klik ik erop om de lettertypepagina te bekijken (groene pijl).

Vervolgens klik ik op de knop "Download familie" om dit lettertype en al zijn variaties naar mijn computer te downloaden. U kunt naar beneden scrollen op de lettertypepagina als u alle beschikbare variaties voor dit lettertype wilt zien.

Klik op "Opslaan" om het lettertype-zipbestand op uw computer op te slaan.

Pak uw lettertypemap uit om toegang te krijgen tot lettertypebestanden

Zodra de download is voltooid, klikt u op de pijl naast de voltooide download (rode pijl) en klikt u op "Toon in map" (groene pijl).

Klik met de rechtermuisknop op het zipbestand in uw bestandsverkenner en klik op "Alles uitpakken".

Er verschijnt een pop-upvenster dat aangeeft waar de lettertypen worden geëxtraheerd (rode pijl). U kunt deze locatie desgewenst wijzigen, anders klikt u op de knop met het label "Uitpakken" (groene pijl). Hierdoor wordt de map uitgepakt en wordt er een nieuw bestand op uw computer gemaakt met alle uitgepakte lettertypebestanden. Deze map zou automatisch moeten openen.

Als u lettertypebestanden hebt gedownload met Google Fonts, voert u de map met het label "statisch" in om al uw lettertypebestanden te bekijken. Zoek anders gewoon naar bestanden die OTF-, TTF-, WOFF- of WOFF2-bestanden zijn.

In deze 'statische' map ziet u een lijst met alle lettertypevariaties die we hebben gedownload voor het Catamaran-lettertype van Google Fonts. Er zijn in totaal 9 variaties en we kunnen ze allemaal uploaden naar onze website of alleen de variaties die we willen/nodig hebben. Klik op de maplocatie in de bestandsverkenner (groene pijl), klik met de rechtermuisknop en selecteer "Kopiëren".

Upload uw aangepaste lettertypen naar WordPress

Navigeer terug naar WordPress waar u het werkgebied "Lokale lettertypen" hebt geopend. Klik op de knop "Bestand kiezen" (rode pijl in de bovenstaande afbeelding) om uw lettertypen te selecteren. U kunt handmatig navigeren naar de locatie op uw computer waar uw lettertypen zijn opgeslagen. Of klik gewoon op de adresbalk van de bestandsverkenner (blauwe pijl), verwijder het huidige adres, klik met de rechtermuisknop en selecteer "Plakken" (groene pijl). Hiermee plak je het adres dat je in de vorige stap hebt gekopieerd. Druk op de enter-toets en je wordt naar de map met je lettertypen gebracht.

U moet uw lettertypevariaties een voor een uploaden. Voor dit voorbeeld upload ik gewoon de lettertypevariant "Catamaran-Regular" door erop te klikken (groene pijl) en vervolgens op de knop "Openen" (rode pijl) te klikken.

U zou nu informatie moeten zien voor de "NAAM VAN HET LETTERTYPE", "STIJL VAN HET LETTERTYPE" en "GEWICHT VAN HET LETTERTYPE", evenals een voorbeeld van het lettertype aan de rechterkant. Klik op "Lettertype uploaden naar uw thema" (rode pijl) om de lettertypevariatie te uploaden.

Bekijk uw aangepaste themalettertypen

U zou nu een succesbericht bovenaan het werkgebied moeten zien (groen omlijnd in de bovenstaande afbeelding). Gefeliciteerd - uw aangepaste lettertype is nu geüpload naar uw thema als een lokaal lettertype! U kunt doorgaan met klikken op "Bestand kiezen" en zoveel lettertypevariaties uploaden als u wilt.

Als u klaar bent, klikt u op de koppeling "Lettertypen beheren" in het berichtvenster voor succes of op de pijl terug (aangegeven door de rode pijl) om terug te keren naar het werkgebied Themalettertypen beheren.

U ziet nu de nieuwe "Catamaran"-lettertypefamilie vermeld bij de rest van de lettertypefamilies van uw thema (rode pijl). Bovendien ziet u de lettertypefamilie en eventuele variaties die u hebt geïnstalleerd aan de rechterkant van het venster Themalettertypen beheren (groen gemarkeerd).

5. Wijzig de lettertypen van uw thema in uw aangepaste lettertypen

Nu je je nieuwe lettertypen hebt geïnstalleerd, is het tijd voor het leuke gedeelte!

Om de lettertypen van uw thema te wijzigen in uw aangepaste lettertypen, navigeert u naar de site-editor door naar Uiterlijk> Editor te gaan (rode pijl in de bovenstaande afbeelding).

Klik ergens in het hoofdinhoudsgebied (rode pijl) van de site-editor om de besturingselementen weer te geven.

Klik in het hoofdmenu op het pictogram "Stijlen" (blauwe pijl). Klik vervolgens op "Typografie" (rode pijl).

Onder "Elementen" kunt u het lettertype voor de tekst, links, koppen of knoppen wijzigen. Ik selecteer de optie "Koppen" voor dit voorbeeld.

U ziet nu een vervolgkeuzelijst onder "Typografie" waar u kunt kiezen uit al uw themalettertypen (rode pijl). Je kunt zien dat de lettertypen "Neuton" en "Catamaran" die ik voor deze zelfstudie heb toegevoegd, hier worden vermeld. Ik selecteer "Neuton" voor mijn koplettertype.

Klik op de knop "Opslaan" in de rechterbovenhoek om uw wijzigingen op te slaan.

Klik nog een keer op "Opslaan" (rode pijl) en uw aangepaste lettertype wordt nu opgeslagen voor alle koppen op uw site!

Vervolgens kunt u klikken op de link Beeld>Site bekijken in de rechterbovenhoek van de site-editor (rode pijlen in de bovenstaande foto) om te zien hoe uw website eruitziet met uw nieuwe lettertype. Keer terug naar de site-editor en herhaal dit proces voor alle andere elementen waarvan u het lettertype wilt aanpassen.

Om terug te keren naar het WordPress-beheergedeelte, klikt u op het logo in de linkerbovenhoek van de site-editor (groene pijl) en klikt u vervolgens nogmaals op het logo.

6. Hoe aangepaste lettertypen van WordPress te verwijderen

Om een ​​van uw aangepaste lettertypen te verwijderen, navigeert u eerst terug naar Uiterlijk>Themalettertypen beheren.

U kunt de hele lettertypefamilie verwijderen door met uw muis over de rechterkant van de naam van de lettertypefamilie te gaan en op het prullenbakpictogram te klikken dat verschijnt (blauwe pijl). Of beweeg uw muis over individuele lettertypevariaties en klik op het prullenbakpictogram (lettertypevariaties bevinden zich binnen het groen gemarkeerde gebied). U kunt ook op de link "Lettertypefamilie verwijderen" klikken om een ​​lettertypefamilie te verwijderen (paarse pijl).

Dat is het voor deze tutorial! Als je het leuk vond, kun je mijn andere bekijken WordPress Help-artikelen of meld je aan bij mijn WordPress-masterclass op Udemy.

Davies Media Design Gratis creatieve apps E-mailnieuwsbrief

Abonneer u op de DMD-nieuwsbrief

Meld u aan om nieuwe tutorials, cursusupdates en het laatste nieuws over uw favoriete gratis creatieve apps te ontvangen!

Je bent met succes geabboneerd!

Pin It op Pinterest