@font-your-face

Wil je eens een ander lettertype dan gewoonlijk... een probleem. De lettertypes die je wilt gebruiken op je site moeten ook in de browser aanwezig zijn van de bezoeker van je site.

Dit kan je oplossen door een lettertype te nemen dat meegeleverd wordt met de pagina die men bezoekt. De module @font-your-face zorgt daar voor. Je kunt kiezen uit verschillende leveranciers. Sommigen zijn betalend. Ik neem het gratis Google Fonts. De basismodule moet je ook activeren.

Na het flushen van de cache zie je bij Uiterlijk een nieuwe menulink.

Het eerste dat je moet doen is de fonts importeren. Het zijn er een pak (meer dan 4000). Onderbreek desnoods de import. Om te verkennen heb je er niet zo veel nodig...

Bij 'Browse' vind je nu een overzicht. Vink er een paar aan die je wilt gebruiken. Niet te veel want telkens je de site bezoekt worden deze lettertypes gedownload!

Als je nu op de titel van een lettertype klikt kom je bij de CSS code terecht.

Het komt er nu op neer om via de CSS injector (onderdeel van de CSS Assett module) aan de klasse of aan de ID deze code toe te kennen. Hier zet ik de sitenaam en slogan eerst wat groter om daarna het Google lettertype te gebruiken.

Het resultaat

De broncode toont dat het lettertype rechtstreeks van de Google site werd gedownload.

Je kunt het ook andersom doen. Bij de instellingen kan je een font display doen. Dit doet het omgekeerde. Je vertrekt vanuit het lettertype en je zegt aan welke klasse het moet hangen. Zo kan je van hieruit bvb alle H1 headers in dit lettertype plaatsen. In dit geval heb je geen CSS injector nodig.