Niet-standaard fonts gebruiken uit externe bronnen

Voor het weergeven van tekst op een website wordt een font (lettertype) gebruikt. Zo is er Arial, Verdana, Courier New, enzovoort. Op je PC staat voor elk font een bestand, waarin het uiterlijk van het lettertype is vastgelegd.
Een bestand dat de beschrijving van een lettertype bevat wordt ook wel gewoon 'font' genoemd. Als je PC onder Windows draait kun je de geïnstalleerde fonts bekijken vanuit 'Lettertypen' in het configuratiescherm.

Ooit was de praktijk dat de fonts die een browser kan gebruiken zich fysiek op de PC moeten bevinden. Daardoor ontstond voor webdesigners een beperking: De fonts die je als webdesigner zou willen gebruiken staan niet noodzakelijk op de PC's van de bezoekers van je site. Je kunt dus niet zomaar alles toepassen wat je zou willen. Maar als je een website wilt bouwen die typografisch interessant is, ontkom je er bijna niet aan om "bijzondere" fonts te gebruiken.

Tegenwoordig kan dat eenvoudig worden gerealiseerd met de CSS-regel @font-face. In het artikel "Niet-standaard fonts gebruiken" wordt uit de doeken gedaan hoe je kunt doen.
Het artikel beschrijft de methode om de fonts zelf te hosten. Dat is een prima methode als je zeker weet dat je het betreffende font vrij van rechten op het web mag gebruiken.
Het vinden van dergelijke fonts kan lastig zijn. Gelukkig stelt Google een bibliotheek met lettertypen beschikbaar, die je gratis mag gebruiken op je eigen site. Daarbij hoef je de fonts niet zelf te hosten, maar kun je ze bij Google laten staan. Je hebt daardoor geen last van browser-afhankelijkheden. Google kiest zelf het juiste file-formaat.

hieronder staat een stukje Lorem ipsum-tekst, in het font Kranky:

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

N.B.: Als er iets fout gaat met de verwerking van het font Kranky, staat de Lorem ipsum-tekst in het standaard 'serif' font van de browser. Meestal is dat Times Roman, of iets wat daar op lijkt.
Voor de goede orde: deze regel staat in het standaard 'serif'-font van de browser.

Op deze pagina wordt uitgelegd hoe je dit font, of elk willekeurig ander font uit de Google-library, kunt toepassen op je eigen site.

Deze methode gebruikt de webfont-API van Google. Dat is een soort computer­programma dat een speciale taak verricht; in dit geval het sturen van een font-bestand naar een browser, in het formaat dat die browser nodig heeft.
Je hoeft geen rekening te houden met browser-afhankelijkheden, dat verzorgt de webfont-API voor je. Dat maakt het toepassen van bijzondere lettertypen een stuk eenvoudiger.
API is de afkorting voor Application Programming Interface.

Opmerkingen

Natuurlijk kleven er nadelen aan deze benadering:

Gebruik:

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>, vóór je andere style-sheets en/of -blokken).

<link href='https://fonts.googleapis.com/css?family=Kranky' rel='stylesheet'>
(Zet dit in de <HEAD>, ná de link naar de de Google API's).
<style>
.AnderFont { font-family:'Kranky',serif; font-size:12pt}
.AnderKopje { font-family:'Kranky',serif; font-size:16pt;
  font-weight:bold; text-decoration:underline; color:#900}
</style>
(Zet dit in de <BODY>. Geef deze eigenschappen aan alle tekst die in het speciale font moet verschijnen, bijv.:).
<p class="AnderFont">Lorem ipsum dolor ... laborum.</p>
 
<p class="Opmerk-g">
<span class="AnderKopje">Opmerking:</span><br>&nbsp;<br>
Ga zorgvuldig te werk ... opmaak van de site.</p>

Opmerking:
 
Ga zorgvuldig te werk bij het kiezen van een font. Het font in het voorbeeld is eigenlijk niet geschikt voor tekst. Voor een titel of tussenkopje kan het juist weer wel geschikt zijn. Dat hangt sterk af van de verdere opmaak van de site.

 
terug

html-305; Laatste wijziging: 13 augustus 2020