Terug

CSS – Google Fonts

Je kunt op je website niet zomaar alle lettertypes gebruiken. In principe ben je afhankelijk van de lettertypes die de gebruiker al op diens computer geïnstalleerd heeft. Zie Web Safe Fonts. Mocht je toch een ander lettertype willen gebruiken, dan zul je die mee moeten sturen met de website. Een makkelijke manier om dat te doen is Google Fonts. Hoe dat werkt leggen we hier kort uit.

Google Fonts
Google Fonts

  1. Ga naar Google Fonts
  2. Kies één of meerdere categorieën
  3. Als je een lettertype hebt gevonden dat je wilt gebruiken, klik je er op.
  4. Selecteer de stijl die je wilt gebruiken. Sommige lettertypes hebben meerdere stijlen. Maar selecteer niet onnodig veel stijlen, dat moet allemaal gedownload worden door de gebruiker.
  5. Als je nog meer lettertypes wilt selecteren, doe dat dan nu.
  6. Je ziet nu de code die je in de head van je pagina moet plakken.
  7. Vervolgens kun je je elementen de juiste font-family en font-weight geven, bijvoorbeeld:
    body {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
    }
    
    h1 {
        font-family: 'Lemonada', display;
        font-weight: 700;
    }