Wil je met WordPress fonts je website een unieke uitstraling geven, of de kracht van branding gebruiken voor het succes van je website? Een goede manier om dat te doen is de lettertypes in WordPress te veranderen.
Omdat niet alle WordPress gebruikers hetzelfde zijn gaan we de verschillende manieren voor je tegen het licht houden. Sommige gebruikers die een nieuw lettertype nodig hebben vinden het misschien makkelijker om dat met code te doen, maar anderen zoeken liever een recht-toe-recht-aan manier.
Dit artikel geeft legt uit welke mogelijkheden er zijn om lettertypes in je WordPress website te veranderen.
Verder geven we belangrijke achtergrond informatie over fonts in het algemeen en een aantal handige tips voor het gebruik van lettertypen.
Inhoudsopgave
Waarom aangepaste fonts gebruiken in WordPress?
Waarom zou je aangepaste lettertypes gebruiken in WordPress?
De meeste thema’s hebben al lettertypen ingesteld om een bepaalde uitstraling te geven. Je kan bijvoorbeeld een luxe of traditionele uitstraling aan je website geven, of bijvoorbeeld een uitstraling die meer eenvoud en innovatie uitstraalt.
Veel bedrijven gebruiken daarom ook een aangepast lettertype voor de branding. Hiermee kunnen ze controle over en bekendheid met hun merk uitoefenen.
Aangepaste lettertypes gaan echter gepaard met prestatiekosten, aangezien ze vaak de weergave van tekst vertragen totdat het lettertype is gedownload.
Welke soorten lettertypen bestaan er?
Eigenschappen
Er bestaan ontzettend veel fonts en font-families, maar in brede lijnen kan je lettertypen verdelen in Serif en Sans Serif fonts. Vertaald uit het frans is dat schreef en zonder schreef.
Op internet wordt vooral Sans Serif gebruikt voor de standaard teksten, omdat het goed leesbaar is online. Een voorbeeld van de twee soorten:
Verder bestaan er in hoofdlijnen nog de volgende categorieën: Display, Handwriting en Monospace
Font gewicht
Beter bekend als vetgedrukt of bold zijn er vaak meerdere opties. Deze zijn uitgedrukt in hondertallen van 100 tot 900.
Met dank aan: Web Font Optimization By Ilya Grigorik
Bestandsformaat
De bestandsformaten die je tegen kan komen zijn vooral: woff2, woff, ttf, otf, svg en eot. Deze worden door een aantal WordPress plugins ondersteund, maar zal je mogelijk handmatig moeten installeren via CSS. Deze methode is niet voor beginners, dus probeer eerst de genoemde plugins.
Goede bronnen voor lettertypen
Er bestaan duizenden lettertypen voor alle mogelijke talen. Het zou daarom lastig zijn ze allemaal te noemen, maar we kunnen wel de belangrijkste bronnen noemen, dan kan je rustig zelf een kijkje nemen.
Standaard systeem fonts
Dit is een set van fonts die bij iedereen aanwezig is, waardoor er geen kapriolen uitgehaald hoeven te worden om ze zichtbaar te maken. Nadeel kan zijn dat ze niet heel uniek ogen, hoewel ze (zeker in combinatie met andere fonts) nog steeds prima functioneren. Groot voordeel is de compatibiliteit en dat ze je website minimaal vertragen vergeleken met andere lettertypen. Dit zijn de beste websafe standaard fonts:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Er zijn nog meer websafe fonts, maar die zijn niet aan te raden, vanwege prestaties of omdat ze erg slecht leesbaar zijn online.
Verder ook bibliotheken met fonts voor WordPress, maar die moeten wel eerst gekoppeld worden(zie later).
Google Fonts
Dit is een van de meest gebruikte bibliotheken met web fonts, omdat alle fonts gratis zijn, zelfs voor commercieel gebruik. Ook zijn ze geoptimaliseerd om de snelheid van je website zo optimaal mogelijk te houden.
Adobe Typekit
Dit is een hele mooie collectie met lettertypen. Ze zijn helaas niet gratis, maar wel inbegrepen wanneer je bepaalde producten van Adobe afneemt. Check dus wanneer je Photoshop of een ander pakket gebruikt of je er aanspraak op kan maken.
Andere bibliotheken
Er bestaan ook nog andere plekken waar je lettertypen kan vinden, soms zelfs ook gratis. Let er altijd wel op dat de gebruikersrechten zijn afgedekt en dat ze ook geschikt zijn voor internet. Een aantal daarvan zijn bijvoorbeeld Ultimate Font, Fonts, Font squirrel en DaFont.
WordPress lettertypen die goed bij elkaar passen
Over het algemeen kan je zeggen dat de combinatie van een letter met schreef (Serif) voor de kopjes en een letter zonder schreef (Sans Serif) voor je teksten het beste werkt. Je kan natuurlijk experimenteren met verschillende combinaties, maar er zijn ook gratis tools die daarbij helpen, zoals:
Verder heeft Google ook een lijstje met Super Families. Dit zijn lettertypen die zoals ze zelf zeggen zijn gemaakt om in harmonie samen te werken.
Top 10 beste WordPress fonts van Google
Standaard manier WordPress fonts veranderen
De meest voor de hand liggende plek om WordPress lettertypen aan te passen is via de Customizer van WordPress, of bij sommige (vooral) oudere thema’s via de thema specifieke instellingen in het WordPress Dashboard. Ook de WordPress kleur tekst aanpassen doe je via deze WordPress tool, meer hierover vind je in onze gratis WordPress handleiding.
De Customizer is te vinden via het onderdeel Weergave in het WordPress Dashboard, of aan de voorkant van de website in de zwarte balk bovenin door het penseel pictogram aan te klikken.
Wanneer het actieve thema andere lettertypen ondersteunt kan je dan vanuit deze Customizer de fonts aanpassen. Bij de betere thema’s is er meestal ook een onderdeel Typografie te vinden. Hier kan je dan alle instellingen mooi bij elkaar terugvinden.
Vooral bij de oudere thema’s zijn vaak naast de Customizer ook nog aparte instellingen te vinden voor de WordPress fonts. Deze zal je dan aldaar moeten aanpassen. Nadeel hiervan is dat je niet direct de uitwerking ziet, maar dat je eerst zal moeten opslaan en dan telkens aan de voorkant moet kijken hoe het is geworden.
Beste WordPress fonts plugins
Als je jezelf niet typeert als bijzonder technisch onderlegd of gewoon niet met code wilt knoeien, is het gebruik van een plugin om lettertype stijlen aan te passen de route voor jou.
De realiteit is dat veel mensen zich tot WordPress wenden omdat ze coderen vreemd is. Binnen de plugin directory zijn er daarom meerdere WordPress plugins om het lettertype te veranderen die je kunnen helpen de gewenste vormgeving voor elkaar te krijgen.
Hierbij dan de beste 8+ plugins voor typografie daarom mooi op een rijtje. Let er natuurlijk altijd op dat ze up-to-date zijn op het moment dat je ze zou gaan gebruiken.
Easy Google fonts
Google heeft een enorme collectie lettertypen en Easy Google Fonts biedt een eenvoudige en gemakkelijke manier om deze aangepaste google lettertypen aan elk WordPress thema toe te voegen zonder te coderen.
Deze plugin integreert met de WordPress Customizer zodat je de google lettertypes op je site in real-time kunt bekijken. Je kunt ook o.a. de kleur, spaciering en andere eigenschappen van elke type tekst veranderen om ze te onderscheiden. Zoek een lettertype familie die je bevalt en speel wat met verschillende mogelijkheden om te zien wat je kan bereiken.
Olympus Google fonts
Als de de eerdergenoemde plugin niets voor je is, probeer dan Olympus Google Fonts. Dit is een heel goed alternatief en is in sommige opzichten zelfs makkelijker in gebruik. Het mist wel de Aangepaste stijlen, maar niet iedereen heeft die nodig.
WP Google fonts
De WP Google Font plugin maakt het net als de bovenstaande makkelijk om de gratis dienst van Google te gebruiken om hoogwaardige lettertypes aan je WordPress site toe te voegen.
Deze plugin voegt niet alleen de nodige Google code toe, maar geeft je ook de mogelijkheid om de Google lettertypes aan specifieke CSS elementen van je website toe te wijzen. Het is een mooie manier om je site op te fleuren zonder dat je veel ervaring of kennis van code hoeft te hebben.
Styleguide
Styleguide is een gratis WordPress plugin die net als de hierboven besproken plugins een uitbreiding is op de WordPress Customizer. Op deze manier kan je wijzigingen die je wil aanbrengen op je site kan bekijken voordat ze live komen. Het voegt 45 van de meest voorkomende Google Fonts toe onder een “Colors & Fonts” menu.
Wat fijn is dat je niet enorm veel instellingen hebt, dus je hoeft niet veel keuzes te maken. Vooral een prima plugin voor beginners die toch iets anders willen.
Use Any Font
In tegenstelling tot de bovenstaande opties, kun je met Use Any Font vrijwel elk lettertype gebruiken. Vrijwel elk lettertype dat je kan vinden op je Mac of PC kun je gebruiken om aan je site toe te voegen.
De ondersteunde formaten zijn: woff2, woff, ttf en otf fonts.
Let alleen wel op de prestaties van je website na het toevoegen, want sommige fonts kunnen erg vertragend werken.
De plugin integreert met de editor zodat je elke gewenste sectie kunt markeren en het lettertype meteen daar kunt veranderen. Ook in Divi en Elementor komen de lettertypes beschikbaar in de dropdown menu’s.
Als dat je te veel werk lijkt is er de mogelijkheid om in één keer lettertypes aan je hele site toe te wijzen. Dit kan per onderdeel, dus H1-H6 en de standaard teksten.
MW Font Changer
MW Font Changer stelt gebruikers in staat een selectie lettertypen in te schakelen die te maken hebben met de Perzische Arabische, en Latijnse talen. Deze plugin biedt lettertypen voor 30+ talen. Op het moment van schrijven is deze plugin wat verouderd, dus kijk even extra goed naar datum van de laatste update.
Custom Fonts
Deze plugin is afkomstig van Brainstormforce, het bedrijf achter het Astra thema. Het werkt daarom alleen met dat thema, of in combinatie met de Elementor pagebuilder of Beaver builder.
Je kan hiermee ook, net als bij Use Any Font andere bestandsformaten gebruiken, zoals: woff2, woff, ttf, en otf fonts. Aanvullend worden svg en eot ook nog ondersteund.
Better Font Awesome
Font Awesome is eigenlijk geen lettertype, maar wordt wel vaak gebruikt op websites in of rondom teksten. Het maakt het mogelijk om pictogrammen te plaatsen op je website. Dit maakt de website beleving prettiger en duidelijker wanneer ze goed gebruikt worden.
WordPress lettertypen veranderen met CSS
Een WordPress thema ontwerper kan specifieke lettertypes kiezen voor bepaalde delen van een thema. Om lettertypes voor een WordPress thema te veranderen, moet je het CSS script identificeren dat het lettertype voor dat specifieke gebied rendert (header, footer, body, enz.)
Als je van plan bent een geheel nieuw lettertype te gebruiken, zal je van te voren wat code moeten toevoegen via de @font-face regel. Het eerste wat je moet doen is een lettertype kiezen dat geschikt is voor gebruik op internet. Dit gekozen lettertype moet je dan naar je server uploaden met FTP of via de Webhost.
Tenslotte moet je deze nieuwe lettertype familie in CSS definiëren. Dit kan via Customizer > Extra CSS, maar het is beter om dit bovenaan het style.css bestand van een kinderthema te plaatsen. Dit is een voorbeeld van hoe dat eruit zou zien. De tekst “NieuweFontNaam” moet je uiteraard veranderen in de naam van je gekozen font.
@font-face {font-family: NieuweFontNaam;
src: local('NieuweFontNaam'),
url("/fonts/NieuweFontNaam.ttf") format('truetype');
font-weight: normal;}1. Verander het lettertype over de hele website (globaal)
Je lettertype globaal veranderen in je thema is zo eenvoudig als het invoegen van één regel code. Zoek de editor van je thema door onder de tab Uiterlijk op ‘editor’ te klikken. Onderaan de pagina vind je het CSS stylesheet van het thema. Hier worden lettertypes gedefinieerd.
Plak deze regel code bovenaan je Stylesheet:
* {font-family: "NieuweFontNaam"}2. Verander het lettertype voor specifieke themagebieden
Vaker wel dan niet zul je verschillende lettertypes willen hebben voor verschillende gebieden op je site. Het identificeren van lettertype-gebieden kan echter een pijnlijke zaak zijn, omdat WordPress thema’s lettertypes op allerlei verschillende manieren gebruiken. In werkelijkheid kunnen lettertypes overal gebruikt worden.
Meestal komt een bepaald lettertype voor in de body van de website. Dit is een overkoepelend lettertype en wordt gebruikt om het lettertype te bepalen voor lettertypes binnen de site die niet door een specifieke tag, klasse of div bepaald zijn.
body {font-family: Verdana, Arial, Helvetica, Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }Lettertypes binnen de inhoud van de website (lees teksten en afbeeldingen van de site) staan meestal in de volgende CSS klassen: content. post, entry, en post-entry.
Deze methode is duidelijk niet voor iedereen weggelegd, dus probeer eerst de plugins wanneer dit je afschrikt.
Font aanpassen voor een deel van de tekst
Alle bovenstaand oplossingen zorgen ervoor dat de lettertypen in een keer over de gehele site(global) worden aangepast. Je kan daarbij meestal nog wel onderscheid maken tussen kopjes(headings) en de standaard tekst, maar een deel van een tekst is (nog) niet mogelijk.
In de pagebuilders Divi kan je van elke standaard tekst een deel selecteren en daar een ander lettertype op toepassen. De Elementor pagebuilder heeft voor tekst blokken ook de optie om een font toe te wijzen, maar dus enkel voor het blok in zijn geheel.
In de standaard WordPress bewerker is het helaas (nog) niet mogelijk om lettertypen te wijzigen. Daarvoor zal je moeten uitwijken naar extra Gutenberg blokken. Met bijvoorbeeld de Kadence plugin krijg je bijvoorbeeld wel op verschillende plekken instellingen voor de letterypen, zelfs met lijnhoogte en spatiëring. In onze WordPress webdesign cursus gaan we dieper in op het gebruik van WordPress fonts.
Handige tools voor Fonts
- WhatFont – Handig om een letterype te achterhalen uit een afbeelding. Uploaden en deze tool verteld je welke fonts het dichtst in de buurt komen qua uiterlijk.
- Identifont – Nog zo’n handige tool, maar hier kan je behalve afbeeldingen ook via andere eigenschappen zoeken, zoals o.a. deel van de naam, designer.
Nawoord
Met deze handleiding zal je nu in staat zijn de juiste WordPress fonts te kiezen en te combineren.
De verschillende formaten, typen en eigenschappen worden tegen het licht gehouden zodat je een goed idee hebt waar je moet beginnen met je WordPress fonts.
Verder hebben we een aantal manieren laten zien hoe je aangepaste lettertypen kan instellen voor elke WordPress website, zowel met als zonder plugin.
Heel veel succes en we horen het graag wanneer je nog aanvullingen of opmerkingen hebt voor deze handleiding.
Geef een reactie