Beste gratis Google web fonts voor WordPress website

Welke letterypes en fonts kun je in 2024 het beste gebruiken voor je website? In dit artikel over typografie geef ik een overzicht van de beste mooiste en gratis lettertypes van Google Web Fonts voor WordPress.

Lettertypes en fonts voor WordPress websites

Fonts, I love it! Sinds mijn 16e één van mijn hobbies. Check mijn site fontzoeker.nl die al sinds 2003 (!) ongewijzigd online is. Het is een website om fonts en lettertypes te herkennen en de naam van het font te achterhalen. Destijds revolutionair, maar inmiddels achterhaald door diensten van bijvoorbeeld Adobe.
Het is een website die ik destijds maakte in Flash. Anno 2024 weigert de site helaas in bepaalde webbrowsers, maar voor old times sake laat ik hem nog even online staan.

Wat zijn Google Web Fonts?

Google Web Fonts is een verzameling van ongeveer 1000 lettertypes die je gratis mag gebruiken voor je website. Deze lettertypes worden door Google gehost op hun servers. De fonts worden online door jouw website ingeladen en aan de bezoeker getoond. Daardoor is het niet meer nodig dat deze lettertypes op de computer van je websitebezoeker aanwezig is. Het tijdperk van Arial, tekton en Verdana is hierdoor (gelukkig) voorbij. Hieronder vind je een overzicht van de beste Google Web Fonts die naadloos met WordPress werken. Enkele handige tips vind je onderaan!

Voordelen Google Web Fonts

Een bijkomend voordeel is dat deze fonts overal en altijd werken. Zowel op PC als Mac en op desktop, tablet en mobiel. Geen zorgen dus, zolang je ze maar goed implementeert in je website. De meeste WordPress thema’s ondersteunen in 2024 standaard Google Fonts.

Tijdens de cursus leg ik uit hoe dit goed functioneert en hoe je alle vrijheid hebt om de typografie van je WordPress website verder te optimaliseren. Tijdens de volgende grafisch ontwerp en webdesign trainingen gaan we dieper op het gebruik van fonts in:

• WordPress Pop-up Bootcamp spoedcursus op maat
• WordPress Bootcamp all-in one spoedcursus
• Online WordPress cursus volgen op afstand vanuit huis
• Cursus WordPress op maat beginners & gevorderden

---

Introductie: schreef of schreefloos font voor webdesign

De eerste keuze die je voor je lettertypes dient te maken is de keuze tussen een schreefletter of een schreefloze letter. Op onderstaande afbeelding is het verschil goed te zien. Bij het schreeflettertype staan de schreven aangegeven met rode rondjes, het schreefloze lettertypen heeft deze extra streepjes niet.

Schreef lettertypes voor webdesign

Schreven (in het engels engels Serif) zijn de dunne streepjes aan het uiteinde van de ‘pootjes’ van een letter. Schreven in een lettertype begeleiden de ogen van de lezer over de regel. Vooral voor lange teksten in drukwerk, zoals in boeken, magazines en kranten, is leesbaarheid erg belangrijk. Daarom wordt teksten in boeken en kranten vaak in een schreef lettertype gedrukt. Bekende en veelgebruikte lettertypes met schreef zijn Times, Palatino en Georgia.

Schreefloze lettertypes voor websites

Bij kortere en grotere teksten zoals titels, inleidingen en industriele toepassingen als verkeersborden heeft het oog geen begeleiding nodig en kunnen schreven zelfs storend werken. Korte en grote teksten worden daarom doorgaans in een schreefloos lettertype opgemaakt. Ook op computers en beeldschermen wordt vooral gebruikgemaakt van schreefloze lettertypen. De schreven storen het letterbeeld op een scherm, omdat dit beeld uit pixels samengesteld is. Hoe kleiner het lettertype hoe storender de schreven zijn weergegeven op een beeldscherm. Veel gebruikte en bekende schreefloze lettertypes zijn o.a. Arial, Helvetica, Calibri en Verdana.

---

---

Top 20 Google web fonts | Schreefloze lettertypes

Bekijk onder het lijstje de voorbeelden van de schreefloze fonts (sans). De getallen geven het aantal gewichten (letterdikte) weer. Hoe meer hoe fijner natuurlijk. Keer 2 wil zeggen, er is ook een cursieve italic versie beschikbaar.

• Work Sans9×2 | Hollandse uitstraling
• Fira Sans9×2 | Mooi. Redactionele uitstraling
• Chivo4×2 | Stevig en old school
• Source Sans6×2 | Klassiek USA. Werkpaard.
• Poppins9×2 | Alternatief Futura. Hip anno 2024
• Lato5×2 | Komt nog dichtst bij de Gill sans
• Open Sans5×2 | No nonsense. Leesbaar
• Karla2×2 | De minste van allen maar goed
• Roboto6×2 | No Nonsense designfont
• Alegreya Sans7×2 | Mooi. Gevoelig font. Voorbeeld
• Archivo4×2 | Schreefloze werkletter
• Raleway9×2 | Mooi maar een irritante w
• Montserrat9×2 | veilige keuze. Veel gewichten
• Rubik7×2 | Hip schreefloos Voorbeeld

---

Bekijk voorbeelden van schreefloze lettertypes/fonts

Bekijk hieronder voorbeelden van de beste schreefloze lettertypes/fonts

[gallery ids=”12462,12464,12469,12471,12476,12477,12481,12482,12485,12486,12489,12491,12493,12495,12499,12501,12502,12504,12505,12506,12509,12510,12512,12514,12517,12519″ row_height=70 height_deviation=20]

---

Top 20 Google web fonts | Lettertypes met schreef

Bekijk onder het lijstje de voorbeelden van de lettertypes met schreef (serif).
Arvo | 4 gewichten
Playfair Display | 6 gewichten | Mooie Bold-Italic
Lora | 4 gewichten
Source Serif Pro
Libre Baskerville (hele economische letter)
Neuton
Cardo
Bitter
Domine
Old Standard TT
Alegreya
Roboto Slab
Scope One | Nieuw, nadeel: maar 1 gewicht
Fjord one | subtiele literaire letter

Voorbeelden van lettertypes/fonts met schreef

Bekijk voorbeelden van de beste lettertypes/fonts met schreef voor je WordPress website:

Blij met deze design tip? Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter inspiratie de reviews: Bekijk reviews

---

Top 10 Google web fonts | Fun fonts

Een lijstje met 4 fun fonts. Leuk voor restaurants, uitnodigingen etc.

Monoton | Adidasletter maar dan met 4 strepen
Kavoon | Vette scriptletter
Cherry Swash
Lobster
Lobster Two
Cherry Swash
BioRhyme, frivole cocktail-letter
Abril Fatface
Gravitas | Mooi voor klassieke koppen. Variant op het 18^e eeuwse Bodoni lettertype
Alfa Slab One | Mooie vette chocoladeletter. Perfect voor Sinterklaastijd

UPDATE | Nieuwe lettertypes en fonts in 2024

Er komen af en toe weer niewe Google Webfonts uit. Dit zijn mijn laatste ontdekkingen:
EB Garamond | Kopie van de klassieke Claude Garamond uit 1592
Cardo | Een kopie van de klassieke Bembo
Overpass | Bewegwijzeringlettertype
Red Hat | Lijkt op de mooie Avenir
Cairo | Vooral mooi als vet schreefloos
Exo 2 | Mooi voorbeeld van Exo 2 op de site van Nederlandse ontwerper Henk Knoeff
Amiri | Lijkt veel op de klassieke minion font
Khand | Vooral de halfvette schreefloos (600) mooi
Mada | Neutrale schreefloze – Gill meets Frutiger
Aref Ruqaa | Gevoelige scriptletter
Reem+Kufi | Retro constructivistisch, let op de Z, zoals de Nobel
Maven Pro | Modern, let op de onderkast (kleine) a. Ook mooi voor logo’s en gratis voor op PC via fontsquirrel
Inter | Mijn favoriete vervanger voor Helvetica, alleen verfijnder.
DM Sans | Strak. Berlijnse uitstraling
Signika | Lijkt op Fira sans maar frivoler
Encode Plus | Mooi vet
Medon | Scriptletter
Source Serif 4 | Mooie platte schreefletter, vet ook mooi

---

Praktijkvoorbeelden van gratis WordPress fonts

Enkele praktijkvoorbeelden van gratis fonts voor WordPress. De onderstaande lettertypes werken altijd heel prettig en zijn een veilige keus voor iedere WordPress website. Waarom? Ze zijn heel goed leesbaar, zowel groot voor koppen en klein voor platte tekst. Daarnaast hebben deze lettertypes heel veel gewichten, dus van dun naar dik, zodat je altijd de goede toon kan zetten met je typografie.

Lettertypes voor huisstijl, branding en drukwerk

Google Fonts werken in principe alleen online. Je kan ze dus niet allemaal gebruiken voor je hele huisstijl en branding en andere communicatie-uitingen. De onderstaande fonts kun je ook downloaden voor je computer, dus als truetype, postscript of open type bestand zodat je ze ook voor een huisstijl of drukwerk kan gebruiken.

Fira font

De Fira Sans is altijd goed en een veilige keus. De kan het Fira Font gratis downloaden als OTF voor Mac en PC zodat je het ook voor andere communicatie-uitingen zoals je huisstijl kan gebruiken.

Montserrat font

De Montserrat Sans is een mooi massieve letter in veel gewichten. Van heel heel dun naar heel vet. In principe geschikt voor vrijwel elke website.

Chivo font

---

Tips voor Typografie en Google web fonts

Tip: Google fonts live bekijken

Een handige website die ik vaak gebruik om te experimenteren met verschillende lettertypes. Je hebt gelijk een preview van jouw text in Google Web Fonts.
Type Zebra

Tip: WhatFont checken in je browser

Een andere heel handige tool voor Chrome voor typografie is WhatFont. Met WhatFont kun je heel makkelijk lettertypes analyseren en achterhalen.
WhatFont voor Chrome browser

Links fonts, typografie en lettertypes

www.designbombs.com/fantastic-fonts
Combinaties maken met Google Web Fonts

---

Video met tips voor lettertypes en fonts voor website

De onderstaande video had ik kunnen maken 🙂
Het bevat veel tips voor lettertypes en fonts voor je WordPress website.

---

---

---

Variabele Google Webfonts met verschillende diktes

Sinds kort is het mogelijk variabele Google Wegfonts met verschillende diktes te gebruiken voor je webdesign. Enkele voorbeelden vind je hier:

Andere fonts en lettertypes voor WordPress (Adobe)

Dit werkt een wat ingewikkelder dan het gebruik van Google Web Fonts. Hieronder staat dit uitgebreid omschreven:

• Lettertypes en fonts toevoegen aan WordPress website
  Typografie en lettertypes zijn heel belangrijk voor de vormgeving en ‘look en feel’ van je website. Een overzicht om fonts op je WordPress website te plaatsen.
  Meer info
• Custom fonts toevoegen WordPress truetype opentype adobe
  Met de plugin ‘Use Any Font’ kun je vrijwel alle custom fonts en lettertypes van bijvoorbeeld Adobe op eenvoudige wijze gebruiken in je WordPress website.
  Meer info

Succes met je Google Web Fonts!