Niet-standaard fonts gebruiken

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.

Langere tijd geleden 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.

Een oude truc is om de tekst in het speciale font in een plaatje (.JPG, .GIF, enz.) te vatten en dat op de site te zetten, in plaats van echte tekst. Dit kunstje werkt echter niet altijd; effecten als het aanpassen van de opmaak aan de breedte van het scherm is hiermee niet mogelijk. Als je te veel van dit soort dingen toepast wordt je site ook nog eens traag.

Om dit probleem te omzeilen is in verleden een aantal fonts uitgekozen door een aantal browserfabrikanten. Die fonts zouden op elk apparaat beschikbaar moeten zijn. Dit worden de core fonts genoemd. Bekende namen zijn:
 
Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana en Webdings.
 
Je kunt er van uit gaan dat deze fonts beschikbaar zijn op alle PC's die onder Windows draaien. Op apparaten die niet onder Windows draaien kun je daar niet van uit gaan. Geef daarom bij elke font-declaratie in CSS éé van de, in elke browser aanwezige, standaard fonts serif of sans-serif op.

De beperking voor webdesigners is dus dat er maar een beperkte set lettertypen kan worden gebruikt.
Het zou ideaal zijn als je een bepaald font gewoon door je webserver zou kunnen downloaden naar de browser, die de tekst dan kan weergeven op de manier die jou voor ogen staat.
Moderne browsers kunnen dat, zoals in deze paragraaf gebeurt.

De tekst hierboven staat in een ander font dan de Verdana die standaard op deze website wordt wordt toegepast. Het font heet Fontin Regular. Het is gemaakt door exljbris Font Foundry.
Je zult dit font niet gauw op een PC aantreffen. Daarom is het als onderdeel van deze site op de webserver geplaatst. De browser heeft het gedownload en gebruikt bij het renderen (= op de juiste manier en zo mooi mogelijk zichtbaar maken) van de tekst.
Als je browser dit niet goed ondersteunt staat de tekst niet in Fontin Regular, maar in Courier New of in het default serif-font van de browser.

Op deze bladzijde wordt beschreven hoe je dat aanpakt.

Tenslotte I:
Veel fonts zijn gratis te gebruiken in je documenten en op het web. Voor andere moet je betalen. Je wordt nooit eigenaar van een font maar je krijgt wel het recht om het te gebruiken.
Verzeker je ervan dat je elk font dat je downloadt ook daadwerkelijk mag gebruiken op het web.

Tenslotte II:
Het is ook mogelijk om bijzondere fonts te gebruiken, zonder die zelf te hosten. Bij het laden van de pagina wordt dat font dan opgehaald van een website die webfonts beschikbaar stelt. Een mogelijke aanpak is beschreven in het item "Niet-standaard fonts gebruiken uit externe bronnen".

Gebruik:

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD> of gebruik een gelinkt style sheet).

<style>
@font-face {
  font-family: 'FontinRegular';
  src: url('fonts/fontin-regular-webfont.eot');
  src: url('fonts/fontin-regular-webfont.eot?#iefix')
            format('embedded-opentype'),
      url('fonts/fontin-regular-webfont.woff') format('woff'),
      url('fonts/fontin-regular-webfont.ttf') format('truetype'),
      url('fonts/fontin-regular-webfont.svg#FontinRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.style1 {font: 12pt/14pt 'FontinRegular',"Courier New",serif; }
.style2 {font: 10pt/14pt 'FontinRegular',"Courier New",serif;
  font-style:oblique }
.style3 {font: 8pt/12pt 'FontinRegular',"Courier New",serif;
  font-style:oblique; color:navy }
</style>
(Voorbeelden van verwijzingen vanuit de tekst in de <BODY>).
<p class="style1">De beperking voor webdesigners is dus dat er maar een beperkte set lettertypen kan worden gebruikt. … </p>
 
<p class="styleFout">Lorem ipsum dolor sit amet, consectetaur adipisicing elit … </p>
 
…staat de tekst niet in <span class="style3">Fontin Regular</span>, maar in …

 
terug

html-301; Laatste wijziging: 27 maart 2022