Behalve de layout van je website en de kleuren en afbeeldingen die je gebruikt, is ook het website-lettertype dat je hebt gekozen, van invloed op de uitstraling van je site. Door een bijzonder lettertype toe te passen, kun je je site direct een heel ander karakter geven.
Maar … je kunt niet zomaar de code h1 {font-family: "Century Gothic";} aan je stylesheet toevoegen als je wilt dat je paragraafkoppen van het eerste niveau in dit lettertype worden weergegeven. Want als dit lettertype (of in jargon: font) niet geïnstalleerd is op de computer van degene die je website bekijkt, krijgt hij je tekst nooit in Century Gothic te zien – en kan het effect waarop je hoopte, helemaal verloren gaan!
Er zijn natuurlijk wel een aantal dingen die je kunt doen om het risico op niet-beschikbare lettertypes te beperken. Hieronder staan drie mogelijkheden.
je geeft eerst je voorkeurslettertype op (in het voorbeeld: Century Gothic)
voor het geval een computer om de een of andere reden niet over dit voorkeurslettertype beschikt, geef je een alternatief op. Veilige alternatieven (lettertypes die op praktisch alle computers zijn geïnstalleerd) zijn: arial, helvetica, times new roman, times, courier new of courier
en voor het geval een computer ook niet over dit alternatief beschikt, geef je een lettersoort aan (serif, sans-serif of monospace), zodat het lettertype dat wordt gebruikt, toch in de buurt komt van je oorspronkelijke keuze
Even wat jargon:
een serif lettertype is een lettertype waarbij de letters kleine streepjes hebben aan de uiteinden (zogenaamde ‘schreven’) – voorbeelden zijn times new roman en georgia
een sans-serif lettertype is een lettertype waarbij de letters die streepjes niet hebben – voorbeelden zijn arial, helvetica en verdana
een monospace lettertype is een lettertype waarvan de letters allemaal dezelfde breedte hebben, net zoals bij de typemachines van vroeger. Een voorbeeld van zo’n lettertype is courier
Een andere mogelijkheid is het lettertype dat je wilt gebruiken te uploaden naar de server van je webhost en ernaar verwijzen in je stylesheet. Bekijkt iemand dan jouw website zonder dat dit lettertype op zijn computer staat, dan wordt het ter plekke van de server gedownload. (Het blijft trouwens een goed idee om ook alternatieven aan te geven in je stylesheet, voor het geval er iets misgaat tijdens het downloaden van het font.)
Wil je het op deze manier doen, dan moet je het font wel in verschillende formaten opslaan, want de browsers kunnen nog niet allemaal met hetzelfde formaat overweg. De formaten die je nodig hebt, zijn: woff (web open font format), ttf (true type fonts) of otf (opentype fonts), eot (embedded opentype fonts) en svg (vector graphics). Hier vind je een uitleg over het uploaden van fonts.
Kies je voor deze oplossing, dan maak je gebruik van de fonts die Google (gratis) ter beschikking heeft gesteld. Je hoeft niets te uploaden naar de server van je webhost, maar alleen een link aan te brengen in je stylesheet naar de plaats waar je de Google-lettertypes vindt. Natuurlijk ben je dan wel beperkt tot de lettertypes die Google aanbiedt op zijn site. (Je kúnt de Google Fonts trouwens wel downloaden, converteren naar de andere lettertype-formaten (zoals bij oplossing 2) en vervolgens uploaden naar je eigen server als je dat liever doet.)
En ook als je de Google Fonts methode toepast, blijft het verstandig om alternatieven te noemen in je stylesheet.
« Ga terug
