Bijzondere lettertypen op websites

Posted By Erwin |


Ik krijg de laatste tijd steeds vaker de vraag of het mogelijk is om een bepaald lettertype in een huisstijl te verwerken.

Bij drukwerk is dat uiteraard geen enkel probleem, er zijn meerdere manieren waarop een drukker probleemloos ieder lettertype kan drukken dat je wilt hebben.

Bij websites ligt dat ietwat anders.

Het is namelijk zo dat je in de stylesheet van een website wel eenvoudig een willekeurig lettertype kan declareren voor ieder element:
{
font-family:”Times New Roman”,Georgia,Serif;
}

Maar die lettertypes zijn niet daadwerkelijk opgenomen in een website, die worden door de browser vanaf de computer van de bezoeker van je site ingelezen. Als je dus een lettertype declareert dat iemand niet op zijn computer heeft, zal die dat niet kunnen zien. Daarom declareer je altijd in plaats van één specifiek lettertype, een familie.
In bovenstaand voorbeeld zoekt een browser eerst naar “Times New Roman”, als iemand dat niet op zijn computer heeft zoekt de browser verder naar “Georgia”, als die ook niet kan worden gevonden, wordt het allereerste Serif (In Nederlands ‘Schreef”) lettertype gebruikt dat kan worden gevonden.


Maar wat nu als je een handgeschreven, gothisch of ander hip lettertype wilt gebruiken?

De twee methoden die ik gebruik zijn:
@font-face
Dit is een methode, ontwikkeld door www.FontSquirrel.com. Hiermee kun je van lettertypen niet alleen de versie voor op je computer kopen en downloaden maar ook de webfont kit.
In die webfont kit zitten alle declaraties voor de verschillende browsers, je kunt dat pakket op je server installeren.
Vervolgens kun je het met de @font-face declaratie in je website embedden. Het lettertype wordt nu niet op de computer van je bezoekers gezocht, maar op de webserver waar je site is ondergebracht.

Google Web Fonts
Google biedt een bibilotheek met daarin een groot aantal lettertypen die in je website kunnen worden gebruikt.
Deze methode is net wat eenvoudige in gebruik dan de bovenstaande methode, zo hoef je alleen maar in je html de stylesheet van het lettertype dat je wilt gebruiken aan te roepen, waarna het lettertype rechtstreeks op de servers van Google wordt opgezocht.
In je stylesheet declareer je het lettertype zoals gebruikelijk.
Het enige nadeel is dat Google maar 622 (op het moment van schrijven) verschillende lettertypen biedt, de kans bestaat dus dat het lettertype dat je zoekt er niet tussen zit.