CSS Academy · Les

Google Fonts en @font-face

Laad externe fonts vanuit Google Fonts of definieer aangepaste fonts met de regel @font-face.

Les 4 van 413 stappen

Google Fonts en @font-face is een gratis CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.

Waarom aangepaste lettertypen?

Webveilige lettertypen bieden maar een beperkt aantal keuzes. Met aangepaste lettertypen kun je de merkidentiteit precies laten terugkomen. De twee belangrijkste benaderingen zijn Google Fonts (een gehoste dienst) en @font-face (zelf gehost).

Google Fonts instellen

Ga naar fonts.google.com, selecteer een lettertypefamilie, kies gewichten en kopieer de tag <link> naar je HTML-<head>:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Google Fonts gebruiken in CSS

Verwijs na het koppelen naar het lettertype op naam in je stapel van font-family-lettertypen:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Parameters van de Google Fonts-API

De parameter display=swap gebruikt de strategie Font Display Swap — tekst wordt meteen weergegeven in het terugvallettertype en schakelt daarna over zodra het aangepaste lettertype is geladen. Zo blijft tekst tijdens het laden zichtbaar.

Basisbeginselen van @font-face

Met @font-face kun je een aangepast lettertypebestand laden dat je zelf host. Definieer de naam van de lettertypefamilie en de bron van het bestand:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: het moderne formaat

WOFF2 (Web Open Font Format 2) is het aanbevolen formaat. Het biedt de beste compressie (doorgaans 30% kleiner dan WOFF) en wordt door alle moderne browsers ondersteund. Neem WOFF altijd op als terugvaloptie.

Meerdere gewichten met @font-face

Declareer één blok @font-face per combinatie van gewicht en stijl. Gebruik dezelfde naam voor font-family, zodat de browser automatisch het juiste bestand selecteert:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

De eigenschap font-display

De descriptor font-display bepaalt hoe lettertypen worden geladen:

swap — toon het terugvallettertype meteen en schakel over zodra het klaar is (aanbevolen)
block — onzichtbare tekst gedurende maximaal 3 seconden
fallback — kort blokkeren en daarna permanent terugvallen
optional — alleen gebruiken als het al in de cache staat

<p class="swap-text">Text swaps in once Inter loads.</p>

Variabel lettertype met @font-face

Variabele lettertypen definiëren bereiken voor assen in plaats van vaste gewichtswaarden:

<p class="variable-text">Variable weight text (550)</p>

Belangrijke lettertypen vooraf laden

Laad je belangrijkste lettertypebestand vooraf om vertraging door renderblokkering te beperken. Voeg een <link rel="preload"> toe vóór het stijlblad:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() gebruiken om downloaden over te slaan

Gebruik local() in src om te controleren of de gebruiker het lettertype al heeft geïnstalleerd voordat je het downloadt:

<p class="roboto-text">Uses local Roboto if installed</p>

Korte controle

Welk lettertypeformaat biedt de beste compressie en de breedste ondersteuning in moderne browsers?

Beantwoord dit in de interactieve les

Samenvatting

Google Fonts biedt eenvoudig gehoste lettertypen via een tag <link>. Host lettertypen zelf met @font-face en gebruik het WOFF2-formaat en font-display: swap voor de beste prestaties. Laad belangrijke lettertypen vooraf en gebruik local() om onnodige downloads te voorkomen.

Gratis beginnen

Leer CSS met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 40
Lessen: 159

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Google Fonts en @font-face” gratis?

Ja — de volledige tekst van “Google Fonts en @font-face” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.

Wat leer ik in “Google Fonts en @font-face”?

Laad externe fonts vanuit Google Fonts of definieer aangepaste fonts met de regel @font-face. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met CSS Academy te beginnen?

Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Google Fonts en @font-face”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over CSS Academy?

Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Font-family en webveilige fonts
Fontgrootte, -gewicht en -stijl
Tekstuitlijning, decoratie en spatiëring
Google Fonts en @font-face

← Terug naar CSS Academy