Zo verander je het lettertype in WordPress (verander de grootte, kleur en optimaliseer alles)

Een goed lettertype maakt het verschil tussen een saaie en een mooie website. Als je weet hoe je het lettertype kunt veranderen in WordPress, kun je je website er modern, professioneel en gestylet uit laten zien.

Maar wat is de beste manier waarop je lettertypen in WordPress in kan zetten en hoe kies je het beste lettertype voor jouw design?

In deze gids leg ik alles uit wat je moet weten over lettertypen in WordPress.

Lettertypen: De terminologie

Laten we eerst beginnen met de terminologie rondom lettertypen op het internet.

• Web-lettertypen (HTML fonts) zijn lettertypen die gehost worden op een website van een derde en waar je naar kunt linken op je eigen website.
• Lokaal gehoste lettertypen zijn precies wat je zou denken (ze worden gehost op de servers van je website).
• Web-veilige lettertypen zijn een beperkt aantal lettertypen die al geïnstalleerd zijn op (bijna) alle computers en waarvan je dus vrij zeker kunt zijn dat alle bezoekers er toegang toe hebben.

Laten we eens kijken welke mogelijkheden je hebt om lettertypen toe te voegen aan je website.

Zo voeg je lettertypen toe aan je WordPress-website (verschillende opties)

Voordat je meteen begint met het toevoegen van lettertypen aan je site, is het handig om te begrijpen welke verschillende opties je hebt.

Lettertypen zijn onderdeel van het ontwerp van je website, dus in de meeste gevallen zullen ze onderdeel zijn van de code van je thema, maar niet altijd. In sommige gevallen wil je er misschien voor kiezen om een plugin te gebruiken die je toegang geeft tot een bredere selectie lettertypen.

Hier zijn enkele van de opties die je hebt:

• Het gebruiken van web-lettertypen zoals Google Fonts door het installeren van een plugin die je daar toegang toe geeft.
• Het gebruiken van web-lettertypen door ze in je thema te programmeren en ze te enqueuen (niet zo ingewikkeld als het klinkt).
• Het hosten van je fonts op je eigen website en deze toevoegen aan je thema.

Er zijn dus eigenlijk twee keuzes – of je gebruikt web-lettertypen die buiten je website gehost worden, óf je kiest ervoor om de lettertypen zelf te hosten. In deze uitleg kijken we naar de voor- en nadelen van beide opties.

Laten we beginnen met het kijken naar web-lettertypen: waarom je ervoor zou kiezen deze te gebruiken en manieren waarop je ze kunt toevoegen aan je website.

Het gebruik van web-lettertypen bij WordPress

Web-lettertypen zijn de meest populaire manier om lettertypen toe te voegen aan je website, omdat ze het makkelijk maken om een brede selectie van lettertypen toe te voegen.

Wat zijn web-lettertypen?

Web-lettertypen zijn lettertypen die gehost worden op de website van een externe aanbieder. Je kopieert niet zelf de bestanden naar je eigen website, maar je linkt naar de website van de aanbieder en dan worden de bestanden daarvandaan getrokken.

Dit betekent dat je kunt kiezen uit een bredere selectie lettertypen zonder dat je ruimte op je server hoeft op te offeren aan het hosten van de bestanden. Dit betekent ook dat naarmate de lettertype-bestanden veranderen, je deze bestanden niet aldoor zelf hoeft te updaten, maar dat je automatisch toegang hebt tot de nieuwe versies via de bestanden van je provider.

Web-lettertypen kunnen gratis of betaald zijn, waarbij ze meestal betaald worden via een abonnement. Enkele populaire aanbieders zijn:

• Google Fonts. De grootste aanbieder van gratis web-lettertypen. Je kunt ook alle lettertypen downloaden op je computer, waardoor je offline materiaal kunt maken met hetzelfde lettertype als je website. En dat is allemaal gratis.
• Adobe Edge Web Fonts. Deze zijn ook gratis. Ze zijn ontwikkeld om te werken met de producten van Adobe, maar ze doen het prima op alle andere websites.
• Fonts.com is een aanbieder van betaalde lettertypen, die je wellicht nodig hebt als je hetzelfde lettertype op je website wilt hebben als op je geprinte materiaal en dat lettertype niet beschikbaar is via een gratis aanbieder.
• fontfabric is een ontwerpprogramma voor lettertypen dat ook premium lettertypen aanbiedt om als web-lettertypen online te gebruiken. Je zult hiervoor moeten betalen, maar dan krijg je wel iets dat unieker is dan een lettertype van Google Fonts.

Al deze aanbieders laten je de lettertypen direct laden vanuit hun eigen servers door code in te voegen in je WordPress-website, of soms door het gebruiken van een plugin waardoor je geen code hoeft toe te voegen.

Web-lettertypen zijn anders dan web-veilige lettertypen. Je kunt deze het beste als terugvaloptie gebruiken voor het geval één van je bezoekers geen verbinding kan maken met je web-lettertype. Later in dit artikel laat ik zien hoe je dat kunt doen.

Waarom zou je web-lettertypen gebruiken?

Nu weet je wat web-lettertypen zijn, maar waarom zou je hiervoor kiezen in plaats van het hosten van je eigen lettertypen?

Enkele van de voordelen zijn:

• Gemak: het toevoegen van een paar regels code of het installeren van een plugin is aanzienlijk sneller en makkelijker dan het downloaden en uploaden van bestanden voor je lettertypen. Het maakt het ook makkelijker in de toekomst van lettertype te wisselen.
• Keuze uit lettertypen: er zijn werkelijk duizenden lettertypen beschikbaar als web-lettertype, en er komen nog altijd meer bij.
• Updates: Als het lettertype-bestand bijgewerkt moet worden, bijvoorbeeld voor het toevoegen van extra tekens of het toevoegen van variabele lettertypen (later meer daarover), heeft je website automatisch toegang tot de nieuwe versie zonder dat jij iets hoeft te doen.

De meeste websites gebruiken web-lettertypen, met een web-veilig lettertype als back-up. En het is heel makkelijk om dit bij WordPress te doen.

Het vinden van de beste web-lettertypen voor jouw website

Als je nu hebt besloten om web-lettertypen te gaan gebruiken, moet je nu de moeilijkste beslissing maken: welk lettertype ga je gebruiken?

In de goede oude tijd, toen webontwikkelaars alleen konden kiezen uit de al geïnstalleerde web-veilige lettertypen, was dit een makkelijke beslissing. Wou je een lettertype met schreef of schreefloos (schreef-lettertypen of serif fonts hebben een kleine streep of lijn aan het eind van de dikkere lijn in elk teken). Als je die beslissing had gemaakt waren je keuzes daarna erg beperkt.

Maar tegenwoordig heb je de wereld aan je voeten.

Hier zijn wat tips om je te helpen bij het kiezen:

• Kijk eens naar je geprinte materialen. Gebruik je daarin al lettertypen die te vinden zijn als web-lettertypen? Zo niet, kun je iets vinden wat erop lijkt?
• Kijk eens naar de websites van je concurrenten. Wat voor soort lettertype gebruiken zij? Ik raad je zeker niet aan dat te kopiëren, maar het kan wel zijn dat een bepaalde stijl past bij het beeld dat je over wilt brengen aan je bezoekers.
• Denk na over wat voor soort gevoel je over wilt brengen met je lettertype. Sommige lettertypen zien er meer modern uit, andere traditioneler. Sommige hebben een ontspannen uitstraling, anderen meer serieus.
• Blijf bij lettertypen die makkelijk leesbaar zijn voor de grotere stukken tekst, en gebruik interessantere typen voor titels, indien je dit wilt.
• Kies uit de meeste populaire Google lettertypen – deze zijn al bekend bij je bezoekers, en makkelijk te lezen.

Als je eenmaal je lettertype gekozen hebt, neem dan even de tijd om wat te experimenteren. Aanbieders zoals Google Fonts laten je je eigen tekst invoeren om te kijken hoe het eruit zou zien in het lettertype dat je overweegt. Als je eenmaal je eigen tekst in het lettertype ziet, helpt dat bij het beslissen of het inderdaad het goede type is.

Onthoud ook vooral dat het gebruik van web-lettertypen het je makkelijk maakt om later nog van lettertype te wisselen, bijvoorbeeld wanneer je je thema verder ontwikkelt of je je website verder ontwikkelt.

Zo voeg je web-lettertypen toe met een WordPress-plugin

Nu je een lettertype hebt gekozen, moet je het gaan toevoegen aan je website.

Als je liever geen code aan je thema-bestanden toevoegt, kun je een plugin installeren die je toegang geeft tot Google Fonts en je het lettertype laat gebruiken dat je wilt.

De Google Fonts Typography plugin geeft je toegang tot de volledige bibliotheek van Google Fonts en geef je de mogelijkheid om ze bij te stellen via de WordPress Customizer.

Installeer de plugin op je website net zoals je dat met een andere plugin zou doen, en activeer de plugin.

Je vindt de Customizer onder Weergave > Customizer . Hier zie je ook een sectie voor Google Fonts.

Ga naar de instellingen door op die link te klikken. Configureer ze vervolgens zo:

Basic Settings: configureer het standaardlettertype voor de hoofdteksten en de koppen, alsook voor knoppen. In de screenshot hieronder kun je zien dat ik een makkelijk te lezen schreefloos lettertype heb toegevoegd voor de hoofdtekst en een meer onderscheidend type voor de koppen.

Advanced Settings: Hier kun je de instellingen veranderen voor branding (titel en beschrijving van de site), navigatie (menu), content en koppen in meer detail, je navigatiekolom en voetnoot. Je kunt ook alvast lettertypen laden zonder ze al ergens aan toe te wijzen, waardoor je ze kunt toevoegen aan als custom CSS in de Customizer.

Font Loading: Als er opmaken van het lettertype zijn die je niet nodig hebt (bijv. vetgedrukt, cursief), dan kun je hier de vinkjes weghalen zodat ze niet onnodig je website langzamer maken.

Debugging: Gebruik deze optie om de weergave van lettertypen te forceren als ze niet naar behoren werken.

Neem wat tijd om met deze instellingen te spelen en ze te testen in de Customizer zodat ze precies werken op de manier die jij wilt. Wanneer je tevreden bent over je instellingen, klik je op de Publiceren-knop. Verlaat de Customizer niet zonder op Publiceren te klikken, anders raak je al je instellingen weer kwijt.

Aanpassen van de kleur van lettertypen

Met de gratis versie van de plugin kun je de kleuren van je lettertype helaas niet aanpassen. Om dat toch te doen zul je dus de premium versie moeten kopen, of de Additional CSS-optie in de Customizer moeten gebruiken.

Ga terug naar het beginscherm van de Customizer en klik op het Additional CSS tabblad. Je ziet dan een leeg tekstveld waar je je eigen CSS kunt toevoegen.

Om het element dat je wilt stylen te vinden, selecteer je het element en gebruik je de code-verkenner in je browser om erachter te komen wat de huidige kleurcode is.

Om het element te vinden dat je moet stylen, selecteer je het en gebruik je de code inspector van je browser om erachter te komen welke kleur styling het al heeft.

Hieronder gebruik ik Google Chrome en heb ik me gericht op een h1 element.

In mijn WordPress-thema heeft de tekst de kleur overgenomen van het body element. Ik wil iets specifieks toevoegen. In het tekstveld voor je CSS type je de CSS voor je element in en de kleur die je wilt gaan gebruiken. Bij mij ziet dat er zo uit:

h1 {
 color: #f542f5;
}

Hierdoor heb ik een felroze h1 element:

Je kunt dit proces herhalen voor alle tekst-elementen waarvoor je de kleur wilt veranderen, en ook als je aangepaste lettertypen wilt toevoegen die geen onderdeel waren van de opties in de andere schermen. Als je wilt weten wat voor CSS je moet gebruiken voor je lettertypen, lees dan verderop in dit artikel over het aanpassen van je lettertypen via CSS.

Zo voeg je handmatig web-lettertypen toe

Als je geen extra plugin wilt installeren op je website en toegang hebt tot de code van je thema, dan kun je web-lettertypen installeren en gebruiken door het toevoegen van code aan je ‘functions’-bestand en je stylesheet.

Als je website een op maat gemaakt thema gebruikt dat je kunt aanpassen, dan kun je het ‘functions’-bestand en je stylesheet aanpassen vanuit je thema. Maar als je een thema van een derde partij gebruikt dat je hebt gekocht of uit de bibliotheek van WordPress-thema’s hebt gehaald, dan zul je een ‘child’-thema moeten aanmaken. Dit thema moet dan twee bestanden hebben: functions.php en style.css.

Laten we het proces voor het handmatig toevoegen van web-lettertypen aan je thema even doornemen. In dit voorbeeld werk ik met Google Fonts, aangezien het gratis en het meest gebruikt is.

Het kiezen van een lettertype en de link kopiëren

Begin met het kiezen van je lettertype van Google Fonts. Voeg het aan je bibliotheek toe door op het plusje naast het lettertype te klikken.

Klik daarna op het tabblad onderaan het scherm voor je bibliotheek en je ziet de code die je aan je website toe moet voegen. Als je extra opmaak voor je lettertype wilt toevoegen klik je op het Customize-tabblad en selecteer je wat je nodig hebt, Ga daarna terug naar het Embed-tabblad.

Je moet de code niet exact kopiëren: je zult het grotendeels gebruiken, maar in plaats van dat je het lettertype oproept in de <head> sectie van de header van je website, zul je de lettertypen enqueuen. Dit is namelijk de correcte manier om het te doen in WordPress.

Dus in plaats van de code, kopieer je alleen de link naar het lettertype vanuit het ‘Embed’ gedeelte.

In mijn geval geeft Google Fonts me dan deze code:

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

Ik hoef dus alleen maar dit stukje te kopiëren:

https://fonts.googleapis.com/css?family=Raleway

Het enqueuen van het lettertype

Open het ‘functions’-bestand van je thema en voeg het volgende toe, waarbij je de link voor het lettertype dat ik gebruik vervangt door de link die je van Google hebt gekregen:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Dit enqueuet de stijl vanaf de Google Fonts-servers. Als je in de toekomst nog meer lettertypen toe moet voegen, kun je een nieuwe regel toevoegen aan je functie, of aan dezelfde regel toevoegen, op deze manier:

function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css?family=Merriweather|Raleway');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );

Deze code enqueuet zowel het Merriweather als het Raleway lettertype.

Het toevoegen van lettertypen aan je stylesheet

Je lettertype zal nu nog niet werken op je website: je moet het eerst nog toevoegen aan het stylesheet van je thema.

Open het style.css bestand in je thema, en voeg de code toe om individuele elementen te stylen met je web-lettertypen. Zorg ervoor dat je het toevoegt ná reeds bestaande CSS voor lettertypen, anders wordt het daardoor overschreven.

Welke elementen je wilt stijlen is helemaal aan jou, maar het is gebruikelijk om een goed leesbaar lettertype te gebruiken voor de hoofdtekst en iets dat wat luxer is voor de koppen.

body {
 font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', serif;
}

In het geval hierboven zal alles op de pagina het Raleway lettertype gebruiken, behalve de h1, h2 en h3 elementen die Merriweather zullen gebruiken.

Sla nu je stylesheet op en check je website om te kijken of alles werkt zoals je het zou verwachten. Als de nieuwe lettertypen nog niet te zien zijn, probeer dan je browser cache te legen en check dat de lettertypen niet overschreven worden door styling voor lettertypen verderop in de stylesheet. Dit is ook de reden waarom het verstandig is om nieuwe styling helemaal onderaan je stylesheet toe te voegen, of nog beter, de bestaande styling te vervangen door de nieuwe.

Het toevoegen van een back-up lettertype

Er kunnen zich gevallen voordoen waarbij iemand je website bezoekt en om één of andere reden geen toegang heeft tot de bestanden voor het web-lettertype. Misschien zitten ze op een slechte verbinding, of gebruiken ze een oud apparaat dat web-lettertypen niet kan weergeven. Of misschien heeft de provider van je web-lettertypen technische problemen.

Om al deze redenen is het een goed idee om een back-up klaar te hebben staan.

De code die je krijgt van Google Fonts heeft al een back-up door eenvoudigweg een serif of sans-serif toe te voegen, maar we kunnen nog een stap verder gaan.

Gebruik één van de web-veilige lettertypen die al geïnstalleerd zijn op het apparaat van je bezoeker, en voeg dan de tweede back-up toe van serif of sans-serif, voor het geval ze een mobiel apparaat gebruiken dat niet eens de web-veilige lettertypen heeft.

Ga terug naar je stylesheet en bewerk je CSS zodat het er zo uitziet:

body {
 font-family: 'Raleway', Helvetica, sans-serif;
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Dit betekent dat mensen die je website bezoeken in principe je web-lettertypen zien, maar als er iets misgaat zullen ze Helvetica of Georgia zien. Als zelfs dat misgaat zullen ze een willekeurig serif of sans-serif lettertype te zien krijgen dat hun browser wél kan laden.

Het hosten van je eigen lettertypen in WordPress

Sommige ontwikkelaars geven er de voorkeur aan om hun eigen lettertypen te hosten op hun eigen server, in plaats van het gebruiken van een web-lettertype. Wellicht ben jij ook zo iemand.

Hier kunnen meerdere redenen voor zijn, bijvoorbeeld veiligheid, prestaties of je budget.

Als je je zorgen maakt om de prestaties van je website, dan kun je de prestaties van je web-lettertypen optimaliseren op verschillende manieren, waar we het later in dit artikel over zullen hebben. Maar als je toch kiest voor het zelf hosten op een lokale server, dan moet je weten hoe je dat doet.

Waarom zou je je eigen lettertypen hosten?

Het gebruiken van web-lettertypen is meestal makkelijker en geeft je meer flexibiliteit, terwijl het ook minder ruimte op je eigen server kost. Maar er zijn ook gevallen waarbij het lokaal hosten van lettertypen logischer is.

Enkele redenen voor lokaal willen hosten van je lettertypen zijn bijvoorbeeld:

Wellicht kun je een oplossing vinden voor sommige van deze problemen:

• Je kunt er de voorkeur aan geven om geen resources van een derde partij binnen te willen halen, aangezien je alleen van je eigen website weet hoe veilig die is.
• Het kan zijn dat je merkt dat het gebruik van een dienst van een derde impact heeft op de prestaties van je website.
• Je hebt al een lettertype-bestand gekocht en wilt dat graag gebruiken. Let erop dat je licentie zowel het gebruik op een website als op geprint materialen dekt.
• Je website wordt lokaal gehost, bijvoorbeeld op een intranet, waardoor gebruikers geen toegang hebben tot web-lettertypen wanneer ze op je website zitten.

Hoe vind je lettertypen die je lokaal kunt hosten

De meeste web-lettertypen kun je ook downloaden om ze te gebruiken als lokaal gehoste lettertypen, maar je moet altijd wel controleren of dit inderdaad is toegestaan. In het geval van Google Fonts is dit sowieso toegestaan.

Je kunt ook lettertypen vinden die niet beschikbaar zijn als web-lettertypen, maar die je wel zelf kunt downloaden en hosten. Elk lettertype-bestand dat je kunt downloaden op je computer kun je in principe uploaden naar je website en daar opslaan. Als je een lettertype wilt gebruiken die bij je huisstijl past maar die niet beschikbaar is als web-lettertype, is dit een prima oplossing. Controleer wel of je licentie dit toestaat.

Hoe voeg je lokaal gehoste lettertypen toe aan je WordPress-website

Nu je hebt besloten dat je je lettertypen lokaal wilt hosten, is de vraag hoe je dat instelt.

Het proces is wat anders dan bij het gebruik van web-lettertypen. Je moet de lettertype-bestanden uploaden naar je website en ernaar linken in je stylesheet, zonder dat je ze hoeft te enqueuen in je ‘functions’-bestand.

Download en converteer de lettertypen

Begin met het downloaden van de lettertypen die je wilt gaan gebruiken. Bij Google Fonts kunt je dit doen door op het download-icoontje te klikken als je het lettertype aan het bekijken bent in je bibliotheek.

Pak het lettertype-bestand uit op je computer en verwijder opmaakbestanden die je niet gaat gebruiken op je website: het heeft geen zin om bestanden te uploaden die je vervolgens niet gaat gebruiken.

Om je bestanden op je website te kunnen gebruiken, moeten ze opgeslagen zijn in het .woff format. Als ze dit niet zijn (zoals wanneer je ze van Google Fonts hebt gehaald), dan kun je een dienst zoals Convertio gebruiken om ze hiernaar te converteren.

Het uploaden van je lettertypen naar je thema

Nu ga je het lettertype-bestand uploaden naar je thema, in de map wp-content/themes/themanaam waar themanaam de mapnaam is van je thema. Het is goed gebruik om alle lettertype-bestanden in een eigen map binnen je thema te plaatsen, dus bijvoorbeeld in een fonts map.

Als je werkt met een thema van een externe aanbieder, maak je eerst een ‘child’-thema aan waar je je lettertype-bestanden en stylesheet aan toe kunt voegen.

Als je dat gedaan hebt kun je het lettertype toevoegen aan je stylesheet.

Voeg het lettertype toe aan je CSS

Open het stylesheet van je thema.

Voer de volgende code in, waarbij je de namen van de lettertypen die ik gebruik vervangt voor je eigen keuze:

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Medium.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: ‘Raleway';
 src: url( “fonts/Raleway-Bold.ttf”) format(‘woff’); /* medium */
 font-weight: bold;
 font-style: normal;
}

@font-face {
 font-family: ‘Merriweather';
 src: url( “fonts/Merriweather.ttf”) format(‘woff’); /* medium */
 font-weight: normal;
 font-style: normal;
}

Voeg eventueel meer toe als je meer lettertypen wilt gebruiken. Let op dat als je opmaak zoals vet of cursief e.d. wilt gebruiken, je elke variatie moet aanmelden door het gebruik van @fontface en je dan het dikte of de stijl moet specificeren, zoals ik dat hierboven heb gedaan met Raleway voor normale en vette opmaak.

Nu voeg je de styling toe voor de gewenste elementen, net zoals je dat zou doen bij web-lettertypen.

body {
 font-family: 'Raleway', Helvetica, sans-serif;
 src: url( “/fonts/Raleway-Medium.ttf” );
}

h1, h2, h3 {
 font-family: 'Merriweather', Georgia, serif;
}

Je lokaal gehoste lettertypen zullen nu binnen je thema functioneren.

Hoe verander je lettertypen in WordPress

Nu weet je hoe je lettertypen kunt installeren in WordPress op één van de twee manieren. Maar hoe pas je ze aan? En hoe verander je van lettertype?

Je kunt je lettertypen op drie manieren veranderen: via de Customizer, in het instellingenscherm voor het artikel of de pagina, of via CSS.

We bekijken alle drie de opties voor het veranderen van de opmaak van het lettertype, de kleur en de grootte.

Hoe verander je lettertypen bij WordPress

Laten we eerst kijken hoe je beiden kunt doen met behulp van de Block Editor of de Classic Editor.

Het veranderen van de opmaak van een lettertype met de Block Editor (Gutenberg)

Als je een recente versie van WordPress gebruikt die de Gutenberg Editor bevat, dan kun je de stijl van je tekst veranderen tijdens het bewerken van je pagina of je artikel.

Selecteer het blok dat je wilt aanpassen en er zal een styling-menu boven de tekst verschijnen.

Selecteer de tekst die je wilt aanpassen en klik op de icoontjes om het vet of cursief te maken. Als je op het pijltje ernaast klikt, kun je ook voor doorstrepen kiezen.

Het veranderen van de stijl van een lettertype in de Classic Editor

Als je een oudere versie van WordPress gebruikt, of als je de plugin Classic Editor gebruikt, dan kun je ook de stijl van je lettertype aanpassen. (Als je de Gutenberg Editor niet wilt gebruiken, kun je het beste WordPress updaten en Gutenberg uitschakelen.)

De Classic Editor bevat een werkbalk boven het hoofdscherm waar je de stijl van je tekst kunt aanpassen. Als je klikt op de werkbalk aan de rechterkant, dan krijg je nog meer opties, zoals doorstrepen.

Het veranderen van lettertype-stijl via de Customizer

Als je de stijl van je lettertype voor een specifiek element wilt aanpassen, kun je dit doen door handmatig CSS toe te voegen via de Customizer.

Open de Customizer en klik op Additional CSS. Je krijgt nu een scherm te zien waar je je CSS kunt invoeren.

Je kunt nu de CSS voor je lettertypen intypen. Als je bijvoorbeeld al je h1 en h2 elementen wilt veranderen naar cursief, dan voeg je deze CSS toe:

h1, h2 {
 font-style: italics;
}

Het veranderen van de stijl van een lettertype via je stylesheet

Als je geen problemen hebt met het toevoegen van code aan je stylesheet, is dit de beste manier om je lettertype aan te passen.

Als je een thema van een externe aanbieder gebruikt, maak je eerst een ‘child’-thema aan voor je eigen styling, anders gaan al je aanpassingen verloren zodra je het thema moet updaten. Binnen het ‘child’-thema maak je vervolgens een stylesheet aan om WordPress te vertellen dat het een ‘child’-thema is, en dat is waar je je nieuwe lettertype-stijl invoert.

Als je je eigen thema gebruikt, kun je de CSS direct aanpassen in je eigen stylesheet. Het bestand is style.css en is te vinden in je thema-map onder wp-content/themes.

Voeg de styling toe aan het einde van je stylesheet zodat het niet geannuleerd wordt door styling die er na komt. Of nog beter, verwijder de bestaande styling voor de lettertype en vervang het, tenzij je dit echt wilt bewaren.

Verander de dikte van een element met font-weight:

span.featured {
 font-weight = bold;
}

Verander de opmaak van een element met font-style:

span.featured {
 font-style = italic;
}

Verander de uitlijning door middel van text-alignment:

span.featured {
 text-alignment: center;
}

Hoe verander je de kleur van een lettertype in WordPress

Nog een verandering die je wellicht zou willen doorvoeren is het veranderen van de kleur van een bepaalde tekst binnen je website. Voordat je al te enthousiast wordt hiermee: je thema is ontworpen met kleuren die goed samengaan, en als je teveel kleuren toevoegt, kan het er al snel opzichtig en amateuristisch uitzien.

Het veranderen van de tekstkleur via Gutenberg

Gutenberg tekstblokken geeft je de mogelijkheid om zowel de tekstkleur als de achtergrondkleur aan te passen. Dit doe je door het blok dat je wilt bewerken te openen en te klikken op het tabblad Kleurinstellingen in de Blok sectie aan de rechterkant.

Hier kun je de achtergrondkleur en tekstkleur van tekstblokken aanpassen naar jouw believen.

WordPress zal je waarschuwen als de gekozen kleurencombinatie slecht is voor de toegankelijkheid en leesbaarheid, zoals in het voorbeeld hierboven. Weersta vooral ook de verleiding om al te enthousiast te worden van alle mogelijkheden qua kleur – je hebt uiteindelijk je thema gekozen omdat ook het kleurontwerp goed bij je website past, en het toevoegen van veel meer kleur laat het er alleen maar rommelig uitzien.

Als je klikt op het tabblad Geavanceerd onder het tabblad Kleurinstellingen, dan kun je ook nog een class toewijzen aan het tekstblok, zodat je die daarna makkelijker kunt stylen via de Customizer of via je stylesheet. Als je bijvoorbeeld een class van .featured toevoegt aan je blok, kun je het daarna stylen door naar die class te refereren.

Het veranderen van tekstkleur in de Classic Editor

De werkbalk van de Classic Editor geeft je de optie om de tekstkleur te veranderen van geselecteerde tekst. Je kunt dus zelfs een individueel woord selecteren en een andere kleur geven. Hieronder heb ik bijvoorbeeld een enkele zin rood gemaakt.

Alhoewel je dit in theorie heel veel flexibiliteit geeft, moet je terughoudend zijn in het gebruik ervan. Wederom, als je heel veel verschillende kleuren toevoegt aan je tekst, kan dit als resultaat hebben dat je website slecht leesbaar en minder toegankelijk wordt.

Het veranderen van de tekstkleur via de Customizer

Als je thema opties bevat voor het veranderen van het kleurenschema van je website, is dat de beste plek om je kleuren aan te passen.

Hieronder gebruik ik bijvoorbeeld een thema waarmee ik een nieuw kleurenschema kan kiezen voor het hele thema in één keer. Dit zorgt ervoor dat de nieuwe kleuren goed samengaan en coherent zijn.

De mogelijkheden hiervoor variëren per thema, sommige thema’s laten je koppen, links en andere elementen aanpassen.

Als je specifieke elementen een andere kleur wilt geven, maar dit niet mogelijk is binnen je thema, dan kun je CSS toevoegen via de Customizer om dit alsnog te doen.

Selecteer Customize > Additional CSS en type je CSS in het tekstveld.

Als je bijvoorbeeld de kleur wilt veranderen van al je h1 koppen, type je dit:

h1 {
 color: #564534;
}

Als dat niet goed werkt, is het wellicht nodig meer specifieke CSS toe te voegen. In mijn thema is de kop-link van de website gecodeerd met het  #site-title ID, dus dan moet ik deze CSS toevoegen:

#site-title a {
 color: #564534;
}

Vervang de kleur die ik hierboven heb gebruikt met je eigen kleur.

Wanneer je tevreden bent met het resultaat, klik je op de Publiceren knop.

Het veranderen van tekstkleur via je stylesheet

Net als de opmaak van je lettertype, kun je ook de kleur van je tekst aanpassen via het stylesheet van je thema (of door het maken van een ‘child’-thema).

Verander de kleur via color. Hieronder verander ik de primaire kleur van de tekst van mijn site via het body element:

body {
 color = #222222;
}

Zorg ervoor dat je al bestaande styling voor dezelfde elementen overschrijft en dat je ook de elementen stylet die die styling “erven” als je wilt dat ze een andere kleur hebben. Alle tekst erft de kleur van het body-element, tenzij er een specifieke styling is voor een element.

Het veranderen van de grootte van de tekst in WordPress

Het kan zijn dat je vanwege de toegankelijkheid van je website je tekst groter dan standaard wilt hebben. Of wellicht vind je bijvoorbeeld de koppen in de velden voor je widgets te klein.

Het veranderen van de tekstgrootte in Gutenberg

Met de Gutenberg editor kun je de tekstgrootte aanpassen per blok.

Selecteer het blok, klik op het tabblad Tekstinstellingen in het Blok menu aan de rechterkant. Je kunt nu de tekst in het blok groter of kleiner maken, zoals hieronder te zien is.

Pas op met te veel aanpassen maken: als elke paragraaf op je pagina een andere grootte heeft ziet je website er onsamenhangend uit en zal deze moeilijk leesbaar zijn.

Het veranderen van de tekstgrootte via de Classic Editor

De Classic Editor heeft niet de mogelijkheid om een specifiek stuk tekst te selecteren en de grootte aan te passen, dus als je dit nodig hebt, zul je moeten upgraden naar de Gutenberg. Sorry!

Het veranderen van de tekstgrootte in de Customizer

Afhankelijk van je thema heb je de mogelijkheid om je tekstgrootte te veranderen via de Customizer, waarbij je de grootte aanpast voor de hele website of specifiek de hoofdtekst of koppen.

Als je thema geen Customizer-optie heeft kun je het beste de Additional CSS methode gebruiken. Ga naar Customize > Additional CSS en voer de CSS in het veld in.

Hieronder maak ik de koppen in de velden voor de widgets groter, met de volgende CSS:

h2.widget-title {
 font-size: 3em;
}

Dit is misschien íets te groot, maar je begrijpt het idee.

Het aanpassen van de tekstgrootte via je stylesheet

Het aanpassen van de grootte van je lettertype via je stylesheet werkt op dezelfde manier als het aanpassen van de andere opmaak.

Als je de grootte van alle tekst binnen je website wilt veranderen, kun je het body element weer gebruiken:

body {
 font-size: 14px;
}

Voor het body element gebruik je pixels, maar voor alle andere elementen gebruik je em zodat de grootte relatief is ten opzichte van het bodyelement.

h1,
#site-title {
 font-size: 2em;
}

Onthoud dat als je veranderingen maakt in het lettertype in het stylesheet van je thema, je dit eerst moet testen in een ontwikkelingssite of een test-site zodat je niet het risico loopt dat je operationele website stuk gaat.

Hoe optimaliseer je lettertypen voor WordPress

Of je nou web-lettertypen of lokaal gehoste lettertypen gebruikt, is het verstandig om je lettertypen maximaal te optimaliseren.

Hierbij geef ik je wat tips om je lettertypen te optimaliseren, zowel qua snelheid als qua ontwerp.

Het optimaliseren van lettertypen voor de beste prestaties

Als je web-lettertypen gebruikt op je website, dan wil je dat ze zo snel mogelijk worden afgeleverd op je pagina’s en dat je website niet trager wordt doordat ze extern worden gehost.

• Gebruik caching om ervoor te zorgen dat pagina’s niet helemaal opnieuw opgebouwd hoeven te worden elke keer dat ze geladen worden. De hostingpakketten van Kinsta hebben standaard caching ingebouwd.
• Gebruik een aanbieder van web-lettertypen die fonts levert via een Content Delivery Network (CDN). Google Fonts doet dit bijvoorbeeld, en dit maakt het laden aanzienlijk sneller.
• Gebruik alleen de lettertypen die je echt nodig hebt. Ga geen variaties van het lettertype (opmaak of grootte) enqueuen die je niet gebruikt binnen je stylesheet. Als je later beslist dat je ze toch nodig hebt kun je ze altijd dan nog toevoegen.
• Als je web-lettertypen gebruikt, zorg dan dat je ze goed buffert. Gebruik geen @import regel in je stylesheet, ook niet als de aanbieder van het web-lettertype zegt dat je dit moet doen.
• Wanneer je CSS handmatig toevoegt, kun je dit het beste toevoegen aan het stylesheet van je thema, en niet aan de <head> sectie van je header.php bestand. Dit is één van de redenen waarom het eigenlijk beter is om te oefenen met het zelf handmatig toevoegen van CSS code aan je thema dan de Customizer of een blok te gebruiken, omdat beide CSS inline aan de pagina toevoegen in plaats van aan het stylesheet.
• Je zou eventueel het gebruik van CSS inline kunnen overwegen om een paar extra milliseconden van de laadtijden van je pagina af te snoepen. Dit is een proces dat base64 codering gebruikt om CSS van je stylesheet aan je pagina toe te voegen voordat je pagina laadt, waardoor je browser geen extra bestanden hoeft te laden. Het klinkt misschien een beetje contra-intuïtief aangezien ik hierboven nog adviseerde tegen het gebruik van inline CSS, maar dat komt omdat dit werkt vanuit een apart CSS-bestand in plaats van het handmatig toevoegen van CSS code inline. Als je meerdere lettertypen gebruikt, kan inlining je website een beetje sneller maken.
• Gebruik minificatie om de grootte van je stylesheet te verkleinen. Dit kan eenvoudig worden gedaan als je een Kinsta klant bent door gebruik te maken van de codeminificatiefeature in het MyKinsta dashboard. Dit stelt klanten in staat om automatische CSS en JavaScript minificatie in te schakelen met een enkele klik, waardoor hun sites zonder handmatige inspanning worden versneld.
• Als je je lettertypen lokaal host, upload dan echt alleen de bestanden voor de lettertypen en opmaken die je nodig hebt. Voeg alleen de variaties van het lettertype toe die je gaat gebruiken via de @font-face declaratie.
• Overweeg het gebruik van een CDN om je eigen lettertype te hosten in plaats van ze op je eigen server te hosten.
• Wanneer je je eigen lettertypen host, voeg dan ook extra formats toe: woff2, woff, ttf en eot. Browsers kunnen dan automatisch de versie selecteren die het snelste laadt.
• Als je een ander lettertype gebruikt voor de titel van je website, buffer dan alleen maar de specifieke tekens die je nodig hebt in plaats van de hele verzameling.

Als de titel van je website bijvoorbeeld ‘Kinsta’ is, kun je je prestaties een beetje verbeteren door een stylesheet zoals dit:

function kinsta_add_title_font() {
 wp_register_style( 'googleFonts', ‘https://fonts.googleapis.com/css?family=Raleway&text=“kinsta');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );

Het optimaliseren van lettertypen voor design

Net als dat je de prestaties van je lettertypen wilt optimaliseren, wil je ook dat ze visueel optimaal zijn: ze moeten goed passen bij het ontwerp van je website en je offline materialen.

Dit is vooral het geval als je een plugin of een ‘child’-thema gebruikt om lettertypen toe te voegen bovenop die al in je thema zitten. Er is zeker een risico dat je thema er rommelig uit gaat zien als je teveel verschillende lettertypen gaat gebruiken in allerlei opmaken en kleuren.

Denk dus na over de volgende dingen, voordat je extra lettertypen toevoegt aan je website:

• Zijn de nieuwe lettertypen consistent met de reeds bestaande lettertypen? Brengen ze een soortgelijk gevoel over?
• Als je een lettertype moet vinden dat al gebruikt is op geprint materiaal maar je niet precies hetzelfde lettertype kan vinden als web-lettertype, probeer dan iets te vinden op Google Fonts dat er zo dicht mogelijk bij zit.
• Zijn de lettertypen die je hebt gekozen ook consistent met je huisstijl? Als je een serieus bedrijf hebt, wil je geen Comic Sans gebruiken (of beter gezegd, je wil eigenlijk nooit Comic Sans gebruiken, wat voor bedrijf je ook hebt).
• Als je de kleur van je lettertypen verandert, gebruik dan een kleur die al in je thema zit, of die er goed bij past. Alleen maar meer kleuren toevoegen zit er rommelig en amateuristisch uit.
• Als je een paar lettertypen uit probeert te kiezen uit Google Fonts, gebruik dan een dienst zoals fontpair om twee te vinden die goed samengaan.

De lettertypen die je in je ontwerp gebruikt hebben een impact op de indruk die je bezoekers krijgen van je website. Denk hier goed over na en kies lettertypen die je merk versterken.

Werken met variabele lettertypen

Variabele lettertypen zijn een nieuw soort lettertype die het efficiënter maken om meer verschillende lettertypen toe te voegen aan je website.

Ze geven je de mogelijkheid om meer informatie op te slaan in één lettertype-bestand, zodat je geen extra bestanden hoeft te laden voor de verschillende variaties (vet, cursief, e.d.).

Voor een lettertype met verschillende diktes, stijlen en opmaken, kan dit een hoop ruimte besparen en het bufferen en het toevoegen via @fontface makkelijker maken.

Variabele lettertypen worden ondersteund in de laatste versies van Chrome, Edge, Firefox en Safari, maar niet door oudere browsers, dus je zult wel een back-up nodig hebben als je dit gaat gebruiken. Er zijn verder ook nog niet veel verschillende variabele lettertypen beschikbaar. Google Fonts heeft bijvoorbeeld geen enkele beschikbaar, maar Google ondersteunt het type wel, dus ze zullen ze op den duur waarschijnlijk wel gaan toevoegen.

Ontwikkelaars van lettertypen werken ook aan het maken van meer variabele lettertypen en het verbeteren van de betrouwbaarheid, dus het is de moeite waard om de ontwikkelingen in de gaten te houden zodat je ze kunt gaan gebruiken als ze stabieler worden.

Samenvatting

Het veranderen van het lettertype op je WordPress-website is niet simpel. Je hebt verschillende mogelijkheden om uit te kiezen:

1. Het gebruik van web-lettertypen door een plugin te installeren.
2. Het gebruiken van web-lettertypen door ze in je thema te programmeren en te bufferen.
3. Zelf hosten van je lettertypen.

Daarna moet je focussen op het optimaliseren van je lettertypen om de beste prestaties te krijgen. Als je de tips in deze uitleg hebt gevolgd, zul je nu niet alleen je lettertype kunnen veranderen in WordPress, maar er ook meer controle over hebben binnen je thema.

Wil je de layout van je pagina of blog declutteren zodat je lezers zich kunnen focussen op je content? Check dan dit artikel: Zo verwijder je de zijbalk in WordPress (4 methodes).