Beste lettertypen voor websites: 30 gratis Google Fonts in echte layouts

De beste lettertypen voor websites zijn leesbaar op kleine formaten, laden snel en passen bij het merk: Inter of Geist voor productsites, Source Serif 4 of Newsreader om te lezen, Rubik of Nunito voor lokale bedrijven. Hier zijn 30 gratis Google Fonts live getoond, met licenties, variabele assen en CSS om te kopiëren en plakken.

Bijgewerkt op 13 oktober 2026

Dit zijn 30 gratis lettertypen van Google Fonts die standhouden op echte websites, gesorteerd op de taak waarin ze het best zijn. Elk lettertype staat hieronder in een kop, een alinea en een knop, met de licentie, of het een variabel lettertype is, de gewichten die meekomen, een fallback-stack en een snippet om direct te kopiëren. De gegevens zijn in oktober 2026 gecontroleerd aan de hand van de Google Fonts-catalogus en de licentiebestanden in de Google Fonts-repository.

Snelle keuzes

• SaaS of app: Inter of Geist voor alles, of Plus Jakarta Sans voor een warmere landingspagina.
• Blog of publicatie: Source Serif 4 of Newsreader voor lopende tekst, met een schreefloze letter voor de navigatie.
• Lokaal bedrijf: Rubik, Nunito of Work Sans, leesbaar op een telefoon en vriendelijk.
• Premium of klassiek merk: Playfair Display of EB Garamond voor koppen, met een rustige schreefloze letter voor lopende tekst.
• Veel talen: Noto Sans.

Probeer uw eigen tekst

Typ hieronder om de voorbeeldtekst in elk voorbeeld op deze pagina te vervangen. De lettertypen worden van Google Fonts geladen zodra u deze sectie opent; tot die tijd toont elk voorbeeld zijn fallback-stack, en dat is ook wat bezoekers even zien terwijl een webfont wordt gedownload.

Alle 30 lettertypen in één oogopslag

Alle 30 zijn uitgebracht onder de SIL Open Font License 1.1. Die staat commercieel gebruik, insluiten op websites en zelf hosten toe, en u mag de lettertypen aanpassen, zolang u de lettertypebestanden niet los verkoopt en de gereserveerde lettertypenamen niet hergebruikt voor aangepaste versies. Een klein aantal families op Google Fonts gebruikt andere open licenties: sommige vallen onder de Apache License 2.0 (bijvoorbeeld Permanent Marker en Special Elite) en de Ubuntu-familie gebruikt de Ubuntu Font Licence. Controleer altijd de licentie op de pagina van een familie op fonts.google.com voordat u hem in gebruik neemt.

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Zo laadt u een Google Font

Zet deze regels in de <head> van uw pagina, vóór uw eigen stylesheet. De twee preconnect-hints laten de browser vroeg verbindingen openen met de host van het stylesheet en de host van de lettertypebestanden; de lettertypebestanden komen van een ander domein en worden in CORS-modus opgehaald, en daarom heeft de tweede hint crossorigin.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

De css2-URL lezen

• family=Inter:[email protected] vraagt een gewichtsbereik op uit een variabel lettertype. Beperk het bereik tot wat u gebruikt; de browser downloadt nog steeds één bestand per subset.
• family=Lato:wght@400;700 vraagt twee specifieke statische gewichten op. Bij statische families is elk gewicht dat u opgeeft een extra bestand.
• ital,wght@0,400..700;1,400..700 voegt de cursieve stijlen toe. Asnamen staan in alfabetische volgorde, kleine letters vóór hoofdletters.
• Herhaal family= om meerdere families in één verzoek te laden.
• display=swap zet font-display: swap in de teruggegeven @font-face-regels, zodat tekst direct in het fallback-lettertype verschijnt en wisselt zodra het webfont binnen is, in plaats van onzichtbaar te blijven.
• text=Hello geeft een bestand terug met alleen die tekens, handig voor een logowoord in een lettertype dat u nergens anders gebruikt.

font-display-opties

Zelf hosten

Omdat deze lettertypen een open licentie hebben, kunt u de bestanden vanaf uw eigen domein serveren in plaats van dat van Google. Redenen die mensen hebben: één verbinding met een derde partij minder, volledige controle over caching, en privacy, want verzoeken aan de servers van Google sturen het IP-adres van de bezoeker naar Google, iets wat sommige Europese site-eigenaren vermijden. Manieren om het te doen:

• Download de familie vanaf de pagina op fonts.google.com, converteer of behoud de WOFF2-bestanden en schrijf uw eigen @font-face-regels.
• Installeer in een JavaScript-project de familie via Fontsource (bijvoorbeeld npm install @fontsource-variable/inter) en importeer hem in uw entry-bestand.
• Next.js-projecten kunnen next/font/google gebruiken, dat de bestanden tijdens de build downloadt en ze vanaf uw eigen domein serveert.

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

Preload bij zelf hosten alleen het ene bestand dat uw tekst boven de vouw nodig heeft, met <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Meerdere lettertypen preloaden laat ze concurreren met uw afbeeldingen en scripts.

Notities over variabele lettertypen

Een variabel lettertype is één bestand met een doorlopend bereik langs een of meer assen, in plaats van één bestand per gewicht. 28 van de 30 lettertypen hier zijn variabel; Poppins en Lato zijn statisch.

• Gewicht (wght) regelt u met de gewone eigenschap font-weight, en elk getal binnen het bereik werkt: font-weight: 650 is geldig.
• Breedte (wdth), hier aangeboden door Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo en Merriweather, koppelt aan font-stretch als percentage, bijvoorbeeld font-stretch: 85%.
• Optische grootte (opsz), in Inter, DM Sans, Source Serif 4, Newsreader, Merriweather en Fraunces, past lettervormen aan op het formaat waarin ze staan. Browsers passen het automatisch toe op basis van de lettergrootte, omdat font-optical-sizing standaard op auto staat. Vraag de as op in de URL (bijvoorbeeld family=Inter:opsz,[email protected],100..900) om hem te krijgen.
• Eigen assen zoals SOFT en WONK van Fraunces stelt u in met font-variation-settings: "SOFT" 100, "WONK" 1;. Gebruik voor gewicht, breedte en schuinte de standaardeigenschappen in plaats van deze eigenschap waar die bestaan, want waarden van font-variation-settings worden niet over regels heen gecombineerd.
• Een variabel bestand is groter dan elk afzonderlijk statisch gewicht. Het loont zodra u ongeveer drie of meer gewichten gebruikt, en wanneer u tussenliggende gewichten wilt voor fijnafstemming.

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

Websafe lettertypen en systeemfontstacks

"Websafe" lettertypen zijn de lettertypen die op bijna elke Windows- en Mac-computer staan, zodat ze niet gedownload hoeven te worden. Op Android, Linux of elke iPhone zijn ze niet gegarandeerd, en daarom eindigt een fontstack altijd met een generieke familie zoals sans-serif of serif.

Een systeemfontstack gaat verder en gebruikt het eigen interfacelettertype van elk besturingssysteem: San Francisco op Apple-apparaten, Segoe UI op Windows, Roboto op Android en meestal Noto of een andere standaard op Linux. Laden kost niets en het ziet er native uit. Dit zijn de stacks die we op het moment van schrijven aanraden:

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-ui wordt door alle actuele grote browsers ondersteund. -apple-system en BlinkMacSystemFont helpen alleen oudere browsers op Apple-apparaten en kunnen weg als u die niet ondersteunt. ui-serif en ui-monospace worden niet door elke browser herkend, en daarom gaat elke stack verder met benoemde lettertypen. De emoji-lettertypen staan aan het eind, zodat emoji in kleur worden weergegeven.

Deze alinea staat in de schreefloze systeemstack, dus hij toont het interfacelettertype van uw eigen apparaat.

Notities over prestaties

• Gebruik minder families en gewichten. Elk statisch gewicht, elke cursief en elke extra familie is een extra bestand. Twee families, of één variabele familie plus de cursief, dekken de meeste sites.
• Kies voor WOFF2. Dat is het best gecomprimeerde webfontformaat en elke actuele browser ondersteunt het. Google Fonts serveert het automatisch.
• Maak subsets per taal. Het stylesheet van Google Fonts splitst elke familie al in subsets met unicode-range, zodat een pagina in het Engels alleen het Latijnse bestand downloadt. Doe hetzelfde als u zelf host.
• Beperk layoutverschuiving bij het wisselen. Hebben de fallback en het webfont verschillende breedtes, dan loopt de tekst opnieuw door zodra het lettertype binnenkomt. Kies een fallback met vergelijkbare verhoudingen, of pas hem aan met size-adjust, ascent-override en descent-override in een fallback-@font-face. next/font en sommige buildtools genereren deze waarden voor u.
• Verberg geen tekst. Zonder font-display: swap of optional tonen browsers mogelijk even geen tekst terwijl lettertypen downloaden, waardoor het later wordt voordat de pagina te lezen is.
• Meet, gok niet. Haal uw pagina voor en na het wijzigen van lettertypen door een labtest. Onze gids over PageSpeed Insights legt uit welke cijfers lettertypen beïnvloeden.

Suggesties voor lettertypecombinaties

Combineer lettertypen die duidelijk verschillen (een schreefletter met een schreefloze, of een brede displayletter met een eenvoudige tekstletter) en iets delen, zoals een vergelijkbare x-hoogte of sfeer. Beperk u tot twee families. Deze combinaties gebruiken alleen lettertypen van deze pagina:

Wilt u meer combinaties naast elkaar proberen, gebruik dan de tool voor lettertypecombinaties. Voor kleuren die bij uw letters passen, zie kleurenschema's voor websites, en voor kant-en-klare layouts met deze lettertypen bekijkt u de componenten voor hero-secties.

Veelgestelde vragen

Wat is het beste lettertype voor een website?

Er is niet één beste lettertype, maar Inter, Source Sans 3 en Open Sans zijn betrouwbare keuzes voor lopende tekst, omdat ze helder blijven op kleine formaten. Kies voor koppen iets met meer karakter dat bij het merk past, zoals Playfair Display, Fraunces of Space Grotesk.

Zijn Google Fonts gratis voor commercieel gebruik?

Ja. Elke familie op Google Fonts valt onder een open licentie, meestal de SIL Open Font License 1.1, met enkele onder de Apache License 2.0 en de Ubuntu Font Licence. Alle drie staan commercieel gebruik toe op websites, in apps en in drukwerk. Controleer de licentie op de pagina van elke familie voordat u hem gebruikt.

Hoeveel lettertypen moet een website gebruiken?

Meestal één of twee families. Een gebruikelijke opzet is één voor koppen en één voor lopende tekst, of één familie met verschillende gewichten voor beide. Elke extra familie en elk extra gewicht voegt bestanden toe die de browser moet downloaden.

Wat is een variabel lettertype?

Een variabel lettertype is één lettertypebestand met een doorlopend bereik aan stijlen langs assen zoals gewicht, breedte of optische grootte. In plaats van aparte bestanden te laden voor regular, medium en bold, laadt u één bestand en kunt u elk gewicht binnen het bereik gebruiken.

Wat zijn websafe lettertypen?

Lettertypen die al op bijna alle Windows- en Mac-computers staan, zoals Arial, Verdana, Georgia en Times New Roman, zodat ze niet gedownload hoeven te worden. Ze zijn niet gegarandeerd op elke telefoon of elk Linux-systeem, dus sluit een fontstack altijd af met een generieke familie zoals sans-serif.

Moet ik Google Fonts zelf hosten?

Dat kan, want de licenties staan het toe. Zelf hosten haalt een verbinding met een domein van een derde partij weg, geeft u controle over caching en houdt IP-adressen van bezoekers weg bij Google. Laden via Google Fonts is eenvoudiger en regelt de subsets voor u. Gebruik hoe dan ook WOFF2 en font-display: swap.

Koptekst

Uw bedrijfsnaam of kop

Alineatekst

Een zin van uw eigen homepage

Knoplabel

Nu boeken

Kopgrootte: {n}px

Voorbeelden herstellen

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

• Gratis SVG-iconenbibliotheken vergeleken
• BIMI-record
• Bing Places for Business
• Bootstrap 5 voorbeelden met Tailwind-equivalenten
• Brave Search API-sleutel
• Brutalistisch webdesign
• Websites met blogs
• Onderwerpregels voor zakelijke e-mail die worden geopend

Product

• AI-websitebouwer
• Wij installeren onze $2M AI-websitebouwer in je bedrijf
• Enterprise
• API-documentatie

Voor wie

• Voor bureaus
• Voor freelancers
• Voor hostingproviders
• Voor SaaS-platforms
• Voor startups
• Financiële diensten
• Zorgoplossingen

Functies

• Editor voor slepen en neerzetten
• SEO en analyses
• Eigen branding
• Klantdashboard
• Reseller-facturatie

Bronnen

• Blog
• Helpcentrum
• Gratis bedrijfstools
• Free UI Components
• Sjablonen
• Sjablooncollecties
• Websitevoorbeelden
• Gidsen
• Vergelijkingen
• Alternatieven
• De beste
• Reviews
• Prijsgidsen
• Woordenlijst en handleidingen
• Integraties
• Ontwikkelaars
• Benchmark
• Windows App

Bedrijf

• Over ons
• Prijzen
• Aanmelden voor het partnerprogramma
• Contact
• Vacatures
• Beveiliging
• Privacybeleid
• Servicevoorwaarden

Sitemap