Hoe gebruik je Google Fonts (Lettertypes) in je website met CSS?

door Kris Bergstra · 19 juni 2022

Webfonts van Google op je website plaatsen

Google Fonts, de lettertypes van Google gebruiken in je website? Hoe doe je dat?
In dit artikel neem ik stap voor stap de code met je door om een webfont van Google te gebruiken in de HTML code van je website.
Hiermee heb je bijna onbeperkte mogelijkheden qua lettertypes om je website helemaal naar je eigen zin te maken.

Veel WordPress thema’s bieden deze mogelijkheid ook. Je kunt kiezen uit de complete bibliotheek van lettertypes die Google aanbiedt.

Op dit moment bevat de bibliotheek van Google fonts ruim 1000 verschillende lettertypes. Dat zijn er nogal wat.
Het is niet aan te raden alle webfonts, alle lettertypes te activeren. Wel kun je een of enkele lettertypes kiezen die je bevallen.

Voor de goede orde heb ik een eenvoudig HTML bestandje gemaakt en een CSS bestandje.

Het HTML bestand ziet er ongeveer zo uit, met daarnaast het resultaat in de browser.

html bestand met de website zelf

De HTML code:

<!DOCTYPE html>
<html lang="NL_nl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stijl.css">
    <title>Google Webfonts</title>
</head>
<body>
  <h1>Google Webfonts</h1>  
    <p>Dit is een voorbeeld van Google Webfonts</p>
</body>
</html>

De CSS code in bestand stijl.css:

* {
  box-sizing: border-box;
}
 
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

Als eerste moet je naar https://fonts.google.com

fonts van Google gebruiken op je website

Wanneer je daar bent moet je een keuze maken tussen alle webfonts die je daar ziet. Stel dat we Roboto willen gaan gebruiken voor ons project.
Dan klik je deze aan.

Alle varianten van Roboto verschijnen dan in beeld.

Vervolgens kies je aan de rechterzijde voor ‘select this style’ van de varianten die je wilt gebruiken.
In dit voorbeeld kies ik voor dikte 400 (normaal) en dikte 700 (vetgedrukt).

Selecteer het lettertype wat je wilt gebruiken door op select this style te klikken

Er verschijnt nu aan de zijkant een extra balk waarin de code staat die je kunt gaan gebruiken. Hierbij kiezen we voor de code die staat bij @import. Dus ‘link’ kiezen we niet. Deze gebruik je wanneer je de code in je HTML document wilt laden. Wij gebruiken daar het CSS document voor.

css link aan de zijkant

Deze @import code plaats je in je CSS bestand.

import van de code in je CSS bestand

Dit CSS bestand wordt dan:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
* {
  box-sizing: border-box;
}
 
body {
  font-family: 'Roboto', sans-serif;  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

Het resultaat wordt dan:

eindresultaat Google Webfonts

Hoe gebruik je Google Fonts (Lettertypes) in je website met CSS?

Geef een reactie Reactie annuleren