Fonts

"Lettertypes" voor de vrienden.

font-family

Een browser kan alleen een lettertype tonen dat de computer van de bezoeker heeft.
Jij moet er dus voor zorgen dat elke bezoeker an je site toegang heeft tot dat lettertype.

Vraag je er een dat er niet is, dan valt de browser terug op iets anders op basis van zijn 'familie': serif (geschreefd), sans-serif (ongeschreefd), monospace (elke letter is even breed), cursive (cursief dus) en fantasy (🤮).

:root {
    font-family: sans-serif;
}

Zet het op :root

Zoals je bij inheritance gezien hebt, erft font-family over. Eén regel op :root en je hele site is mee.

When in doubt: gebruik sans-serif

Op een scherm leest een schreefloos lettertype vlotter, het is de klassieke 'familie' voor gebruik op beeldschermen, en dan zijn we van die default times new roman af 🤢.

Een eigen lettertype

De vijf generieke families zijn ... saai. Wil je iets anders, dan moet dat bestand ergens vandaan komen. Er zijn drie manieren, we geven ze allemaal mee... maar je gebruikt er maar één!

Zonder respect voor je privacy

Een link-tag naar Google Fonts, of een @import bovenaan je CSS:

<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=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">

Dit werkt, het is super gemakkelijk, het staat in elke tutorial, en je gaat op veel sites zo zien staan.
Wij doen het niet.

Elke keer een bezoeker jouw pagina opent, haalt zijn browser dat lettertype bij Google op. Om dat te kunnen doen, stuurt hij zijn IP-adres naar Google. Jouw bezoeker heeft daar nooit toestemming voor gegeven!

GDPR

Een rechtbank in München heeft in 2022 een website-eigenaar veroordeeld voor het gebruik van google web fonts.

• verbod op het doorgeven van het IP-adres.

  De gedaagde mag het IP-adres van de bezoeker niet aan Google doorgeven. Doet hij het toch, dan kan de boete oplopen tot €250 000 per overtreding, en bij niet-betaling tot zes maanden gevangenisstraf.

• informatieplicht.

  De gedaagde moet de bezoeker vertellen of en welke persoonsgegevens doorgegeven werden.

Externe fonts via Google zijn zonder toestemming van de gebruiker niet GDPR-compliant.

Wat je wel doet: zelf hosten

Je downloadt het lettertype, je zet het bestand in je eigen project, en je registreert het bovenaan je CSS met @font-face.

@font-face {
    font-family: "Josefin Sans";
    src: url("./fonts/JosefinSans.woff2") format("woff2");
}

Daarna gebruik je het zoals elk ander lettertype:

:root {
    font-family: "Josefin Sans", sans-serif;
}

Geen verzoek naar Google, respect voor de privacy van je bezoekers, en je pagina laadt sneller omdat er één externe server minder aan te pas komt!

In het labo

De stappen van downloaden tot @font-face doe je in labo 3: het juiste bestandsformaat kiezen, converteren, en de licentie nakijken. Dan staat het meteen in je eigen project.

Altijd een fallback

Er kan altijd iets mis gaan. Ook bij self hosted fonts.
Dus voorzie altijd een fallback!

:root {
    font-family: "Josefin Sans", sans-serif;
}

Die sans-serif achteraan is de fallback. Laadt je lettertype niet, of duurt het te lang, dan valt de browser daarop terug. Zonder fallback krijgt je bezoeker... times new roman 🤢.