Web: Essentials

Appearance

CSS: fonts ​

Wat is een font? ​

1 font = 1 bepaald lettertype in 1 bepaalde stijl:

bv: Roboto Regular

1 font heeft een hele hoop tekens:

  • Iedere letter van het alphabet (a - Z)
  • Ieder nummer (0 tot 9)
  • Lettertekens (; , . ? / >)
  • Lettervariaties (é ê ë ē ę è ž, ...)

Variabele fonts ​

Eén enkel fontbestand dat meerdere stijlen en gewichten bevat:

  • Flexibele variaties
  • Minder bestanden
  • Dynamische aanpassingen
  • Prestaties: minder http-requests

Een font gebruiken ​

font-family property ​

Bepaalt welk lettertype gebruikt wordt. Je kan meerdere lettertypes definiëren per lijn (fontstack). Deze werken als fallback (reserve) indien een lettertype niet beschikbaar is.

css
body { 
  font-family: Arial, sans-serif; 
}

h1 { 
  font-family: Times, serif; 
}

code { 
  font-family: Monaco, monospace; 
}

Titel: Times

Body: Arial

Code: Monaco

Fontstack categorieën:

  • Serif (schreef): Times, Georgia
  • Sans-serif (schreefloos): Arial, Helvetica
  • Monospace: Courier, Monaco - voor code

Systeem fonts en custom fonts ​

Systeem fonts ​

Systeem fonts verschillen per besturingsysteem:

  • OSX (Apple): 198 fonts
  • Windows (Microsoft): 440 fonts

Welke fonts zijn er beschikbaar?

Custom fonts ​

Je kan natuurlijk ook je eigen fonts (custom) gebruiken:

Om deze te gebruiken moet je die wel eerst inladen in je HTML. Je kan deze fonts zelf hosten of via een CDN (content delivery network) inladen:

  • Zelf hosten: meer controle en sneller
  • CDN: makkelijker in gebruik

Fonts gebruiken via CDN (google fonts) ​

Kies een font dat je wil gebruiken op Google Fonts:

  • selecteer het font dat je wil gebruiken (of meerdere fonts) en klik op Get font
  • in dit voorbeeld gebruiken we Roboto
  • ga naar het venster View selected families (icoon rechts boven)
  • pas eventueel het aantal gewichten aan dat je wenst te gebruiken
  • klik op Get embed code en kies voor de <link> optie
  • kopieer het stukje embed code voor de <head> van je HTML
  • plak de embed code nu in de <head> van je HTML bestand
  • let er op dat elke HTML-pagina van je project deze code bevat

Embed code in de <head> van je HTML

html
<head>
  <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=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>

Je kan nu het custom font gebruiken in je CSS bestand . Een custom font definiëer je steeds tussen aanhalingstekens.

css
h1 {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
}

p {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
}

Titel: Roboto 700

Body: Roboto: 400

Fonts zelf hosten ​

Kies een font dat je wil gebruiken op Google Fonts:

  • selecteer het font dat je wil gebruiken (of meerdere fonts) en klik op Get font
  • in dit voorbeeld gebruiken we Lato
  • ga naar het venster View selected families (icoon rechts boven)
  • pas eventueel het aantal gewichten aan dat je wenst te gebruiken
  • klik op Download all
  • plaats je gedownloade fonts in een fonts mapje binnenin je project
  • in je CSS bestand moet je nu eerst je fonts beschikbaar maken door @font-face regels toe te voegen. Let er op dat je pad correct is.

Font-face regels

  • per gewicht moet je een nieuwe @font-face regel voorzien, voor een variabel font is 1 enkele regel voldoende
  • plaats deze in het begin van je CSS bestand
css
@font-face {
  font-family: "Lato";
  src: url('fonts/Lato-Regular.woff2') format('woff2'), 
    url('fonts/Lato-Regular.woff') format('woff');
  font-weight: 400; /* we definiëren ook het gewicht */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/Lato-Bold.woff2') format('woff2'), 
    url('fonts/Lato-Bold.woff') format('woff');
  font-weight: 700; /* we definiëren ook het gewicht */
  font-style: normal;
  font-display: swap;
}

Je kan nu het custom font gebruiken in je CSS bestand . Een custom font definiëer je steeds tussen aanhalingstekens.

css
h1 {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
}

p {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 400;
}