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.

• Om te beginnen moet je een font uitzoeken. Dat doe je op: fonts.google.com.
• Bij sommige fonts staat het aantal varianten vermeld dat er van dat font is. Denk daarbij aan: Normaal, Vet, Cursief, Vet-Cursief, enz.
  Als je een font kiest met varianten, neem dan alleen die varianten op die je daadwerkelijk gebruikt. Dat scheelt overhead (lees: downloadtijd).
• Als je een font hebt gekozen, kun je dat downloaden om lokaal op je PC te gebruiken of in je website op te nemen. Beperk jezelf in het aantal stijlen ven een font, want je hebt er gauw te veel.
• Er staan twee regels code:
  
  1. De eerste regel lijkt op het linken van een style-sheet. De CSS-code wordt echter gemaakt door de webfont-API en naar je browser gestuurd.
  2. De tweede regel is een voorbeeld van een <H1>-tag om in je eigen style-sheet of style-block te zetten. In het voorbeeld op deze pagina zijn er twee classes van gemaakt; één voor de Lorem ipsum-tekst, de andere voor de tussenkopjes.
  Zie de code onderaan de bladzijde.

Opmerkingen

• Informatie over de fonts-API van Google vind je op de developers-pagina's van Google zelf:
  developers.google.com/fonts/docs/getting_started.
• Het is belangrijk om de link naar de webfont-API in de <HEAD> te zetten, vóór alle andere style-sheets en style-blocks.
• Als je meer dan één font tegelijk in je pagina wilt gebruiken is het niet nodig om de webfont-API meerdere keren aan te roepen. Één aanroep volstaat. Scheid de namen door een verticaal streepje, bijvoorbeeld (Zie ook de code onderaan de pagina): family=Kranky|Maiden+Orange
  Merk op dat een spatie in de naam wordt vervangen door een plus-teken.
• Als je het font wilt downloaden om zelf te hosten of voor andere doeleinden, dan kan dat door op Download te klikken. Je krijgt dan een .zip-file met daarin een of meerdere .ttf-bestanden. Die moet je behandelen zoals aangegeven in het item "Niet-standaard fonts gebruiken".
   
• Je bent niet strikt gebonden aan de fonts die door Google beschikbaar worden gesteld. Je kunt ze ook van andere leveranciers betrekken. Sommige van die leveranciers stellen een API ter beschikking, bij andere kun je een font downloaden in web-formaat.

Natuurlijk kleven er nadelen aan deze benadering:

• De browser kan het font pas op het scherm zetten als de hele font-file van Google is ontvangen. Als de bezoeker van je site een trage verbinding heeft, kan het even duren voordat de tekst in het gewenste lettertype wordt getoond. Tot het moment dat de browser het font kan renderen (= op het scherm zetten) wordt het eerst beschikbare font uit de font-family gebruikt. In het voorbeeld is dat het standaard serif-font.
• Het is niet zeker of het font dat je nu hebt uitgekozen over (pakweg) 10 jaar nog steeds beschikbaar is, hoewel je daar bij Google wel vanuit kunt gaan.

Gebruik:

• De code staat in de <HEAD>.

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.