Met CSS kun je aangepaste lettertypen op je website op verschillende manieren gebruiken. Hier laat ik je zien hoe je dit kunt doen door het gebruik van de @font-face-regel.
Eerst en vooral, zorg ervoor dat je de lettertypebestanden hebt. Deze bestanden hebben mogelijk extensies zoals .woff, .otf, .ttf of .eot. Voor maximale compatibiliteit met verschillende browsers gebruik je idealiter de .woff of .woff2 formaten.
Zodra je de bestanden hebt, upload je deze naar je website. Het is gebruikelijk om een aparte map te maken, zoals ‘lettertypen’ om deze bestanden in op te slaan.
Nu, in de CSS, gebruik je de @font-face regel om aan te geven waar de bestanden zich bevinden en hoe het lettertype moet worden genoemd in de rest van de CSS.
```
@font-face {
font-family: “Mijn Aangepaste Lettertype”;
src: url(“/lettertypen/mijn_aangepast_lettertype.woff2”) format(“woff2”),
url(“/lettertypen/mijn_aangepast_lettertype.woff”) format(“woff”);
}
```
In het bovenstaande voorbeeld is “Mijn Aangepaste Lettertype” de naam waaronder je het lettertype in de rest van de CSS kunt oproepen. De url moet wijzen naar waar je het bestand hebt geüpload. Merk op dat er meerdere url’s kunnen worden gegeven voor verschillende formaten, de browser downloadt dan het eerste formaat dat het kan gebruiken.
Nu kun je het aangepaste lettertype gebruiken in de rest van de CSS, net zoals je normale lettertypen zou gebruiken.
```
body {
font-family: “Mijn Aangepaste Lettertype”, fallbackLettertype;
}
```
In dit geval wordt je aangepaste lettertype gebruikt voor alle tekst binnen de body tag. Als de browser jouw aangepaste lettertype niet kan laden, valt het terug op het lettertype dat je als fallbackLettertype hebt aangegeven. Dit kan elk standaardlettertype zijn, zoals Arial, Verdana, enz.
