Websitemakers krijgen er geregeld mee te doen, wanneer ze iets speciaals willen doen met hun favoriete lettertype kan het jammer genoeg niet op het scherm van bezoekers getoond worden. Normaal gesproken heb je immers slechts de beschikking over een aantal standaard lettertypes die bij elke gebruiker aanwezig zijn zoals Arial, Verdana, Tahoma en Times New Roman. Nochtans bestaat er een methode om toch nog je lettertype te tonen aan websitebezoekers.
Inleiding:
Enerzijds bestaan er talloze programma’s als sIFR die werken met een combinatie van Flash en Javascript om een speciaal lettertype te tonen. Nochtans met de komst van CSS 3 en modernere browsers is het mogelijk om dit proces een pak te vereenvoudigen. Door middel van Google Font Directory kun je met behulp van Google eenvoudig speciale lettertypes gebruiken die werken in vrijwel alle bekende browsers bruikbaar zijn. De Font Directory bevat enkele speciale standaard lettertypes. Omdat de dienst nog maar sinds mei 2010 bestaat, is het mogelijk dat jouw favoriete lettertype nog niet beschikbaar is. Wees gerust en wacht rustig af, ze voegen dagelijks nog lettertypes toe.
Welke browsers ondersteunt het?
De browsers die de speciale fonts kunnen tonen zijn:
- Google Chrome: 4.249.4 en hoger
- Firefox: 3.5 en hoger
- Safari: 3.1 en hoger
- Internet Explorer: 6 en hoger
De stappen :
1. Zoek je speciale lettertype op binnen de speciale website (http://code.google.com/webfonts/ ) van Google. Wanneer je op het lettertype klikt zal er een voorbeeld verschijnen hoe websitebezoekers het resultaat zullen ervaren.
2. Klik op het tabblad ‘Get the code’ om de benodigde codes te ontvangen.
3. Plak de eerste code in het <head> gedeelte van je website (in dit geval het font Reenie Beanie).
Bijvoorbeeld: <link href=’http://fonts.googleapis.com/css?family=Reenie+Beanie’ rel=’stylesheet’ type=’text/css’>
4. Geef in je CSS-bestand de code in voor de koppen.
Bijvoorbeeld: h1 { font-family: ‘Reenie Beanie’, arial, serif; }
5. Eigenlijk is daarmee de kous al af. Veel meer valt er niet aan te passen binnen je websie. Wel kan je nog kiezen om meerdere speciale lettertypes van Google te benutten binnen je website. Je kan ze scheiden door een ‘|’ in te geven tussen de lettertypes.
Bijvoorbeeld: http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans.