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.

• Er worden twee items besproken:
  1. De CSS-code
  2. Haken en ogen aan het gebruik
   
• Er wordt gebruikt gemaakt van de CSS-methode @font-face. Hiermee kun je je eigen bijzondere lettertypes in je webdocument opnemen. Het geeft je site iets bijzonders, dat je onderscheidt van de rest.
• Met @font-face beschrijf je een font-family. Je geeft daarbij aan waar de font-bestanden zijn te vinden. Ook geef je op wat de default-waarden zijn voor de grootte, het gewicht en andere opmaak van het font. Net als bij andere font-family declaraties geef je (eventueel) alternatieve fonts op en eindig je met "serif" of "sans-serif".
• Je verwijst naar een nieuwe font-family met een class, id of een style-attribuut, net zoals je zou doen bij een 'gewone' font-family.
  Zie de code aan het einde van deze bladzijde.
   
• @font-face komt al voor in de CSS2-specificaties. De ondersteuning door de grote browsers is goed, maar het is nog net niet wat het zou moeten zijn. De verschillende browsers werken elk met verschillende bestands-formaten, waardoor de toepassing op je site wat lastiger is.
• In de praktijk zijn er vier verschillende formaten:
  
  • TrueType, extensie .ttf
    Dit font-formaat wordt veel gebruikt op Windows-computers. De opvolger van TrueType heet OpenType, .otf. Beide formaten worden in CSS gezien als TrueType.
  • Web Open Font Format, extensie .woff
    Dit formaat dateert uit 2009. Het is echt ontwikkeld als web-font, dus voor gebruik door websites. Het wordt door het World Wide Web Consortium (W3C) aanbevolen.
    De opvolger van .woff is .woff2, dat een betere compressie heeft. Het bestand is dus kleiner. Op het moment dat dit geschreven wordt is het een door W3C aanbevolen file-formaat. Sommige browsers ondersteunen het al.
  • Embedded OpenType, extensie .eot
    Dit is een gecomprimeerde vorm van TrueType. Het wordt alleen ondersteund door Internet Explorer.
  • Scalable Vector Graphics, extensie .svg
    Dit is eigenlijk geen font maar een schaalbare tekening, beschreven in XML. Elk karakter wordt als XML-bestand naar de browser gestuurd en met behulp van JavaScript op het scherm gezet.
    Dit formaat is door W3C als web-standaard aangewezen.
   
• In plaats van SVG kun je ook Scalable Vector Graphics-Zipped, extensie .svgz, gebruiken.
  Dit is een met G-zip gecomprimeerde versie van .SVG. .SVGZ-files zijn aanzienlijk kleiner dan overeenkomende .SVG-bestanden. Verder zijn ze identiek. Om dit te kunnen gebruiken moet je met een META-tag aangeven dat er gezipte content aanwezig is. Soms moet de webserver software worden ingesteld voor het gebruik van SVGZ.
• De tabel toont de ondersteuning door de meest gebruikte browsers. Op het moment dat dit geschreven wordt (augustus 2017) zijn het de geldige versies.
   

  Browser	Bestands-formaat
  	ttf	woff	eot	svg
  IE 9, 10 en 11	Beperkt	Ja	Ja	Ja
  Edge	Ja	Ja	Nee	Ja
  FireFox	Ja	Ja	Nee	Ja
  Safari	Ja	Ja	Nee	Ja
  Chrome	Ja	Ja	Nee	Ja
  Opera	Ja	Ja	Nee	Ja
  iPhone en iPad	Ja	Ja	Nee	Ja
  Android	Ja	Ja	Nee	Ja

   
  Zoals je ziet is de ondersteuning zo goed als volledig. Om weergave-problemen te voorkomen zou je toch nog minstens .woff en .svg moeten toepassen in je site. Het is ook niet verkeerd om .ttf mee te nemen. Je zou eventueel .eot weg kunnen laten. Dat laatste raad ik overigens niet aan om compatibiliteits­problemen met (oudere versies van) IE te voorkomen.
• Ik verwacht dat het .eot-formaat op termijn geheel verdwijnt. Uiteindelijk zullen alleen .woff(2) en/of .svg overblijven.
   
• Om een @font-face te maken moet je tenminste opgeven (zie de code onderaan de bladzijde):
  
  • font-family: De naam van de font-family die je maakt.
  • src: Voor elke font-file: De url en het format.
    Let op de manier van schrijven: tussen twee combinaties van url en format staat een komma, tussen url en format zelf staat een spatie.
  • Zet bij de opsomming van de bestanden .eot altijd bovenaan. Daarmee voorkom je dat Internet Explorer het font niet weergeeft. Andere browsers slaan het over en kijken net zolang tot ze iets vinden wat ze kunnen weergeven.
  • De src van het .eot bestand komt twee maal voor: een keer zonder format en een keer met format. Op deze manier bereik je dat het font in alle versies van Internet Explorer goed wordt weergegeven.
  • Binnen @font-face kun je ook nog opmaak definiëren, zoals font-weight:normal; of font-style:normal;
   
• De plaats op de server waar je de font-files van je website neerzet is belangrijk. Zet ze in dezelfde directory als de .htm-bestanden die de fonts gebruiken, of (zoals op deze bladzijde) in een subdirectory.
  Pas op met paden zoals in ../fonts/fontin-regular-webfont.eot. Oudere browsers kunnen niet overweg met relatieve paden. Het gaat dan ook niet goed als de @font-face regel in een stylesheet staat, en het .css-bestand in een andere directory staat als het .html-bestand dat het sheet gebruikt.
   
• Het is handig om gelijk een paar CSS-classes te maken. Dat maakt het gemakkelijker om vanuit de <BODY> naar de font-family te verwijzen.
   
• Een complete @font-face declaratie met de bijbehorende lettertype-bestanden wordt ook wel kit of font-kit genoemd.
• Websites die webfonts beschikbaar stellen leveren die vaak ook als complete font-kit. Een (zeer beperkt) overzicht van dergelijke sites vind je onderaan op de begin-pagina van de HTML-sectie. Een artikel over fonts in het algemeen vind je in het item Afmetingen van letters en toepassing met CSS.

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 staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

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>

<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 …