Website - Alle lettertypen met Cufon


Het gebruik van lettertypen op websites is normaal gesproken bijzonder beperkt. Je bent gebonden aan websafe lettertypen zoals Arial, Times New Roman en Verdana. Het is vereist dat deze fonts aanwezig zijn op de computer van de bezoeker wat doorgaans wel het geval zal zijn. Dat neemt niet de wens weg om soms gebruik te maken van andere fontjes zoals bijvoorbeeld Helvetica, gelukkig zijn er een aantal mogelijkheden.

Lorem Ipsum

Sifr

Als eerste optie is er Sifr, een techniek die gebruik maakt van Flash om zodoende koppen of andere elementen te voorzien van een speciaal lettertype. Echter dit gaat niet altijd even goed en een vereiste is dat de bezoeker Flash heeft geinstalleerd, iets wat niet alle bezoekers hebben. Uiteraard heb je zelf ook Flash nodig om het juiste bestand te maken.

Naast Sifr zijn er enkele andere technieken beschikbaar om speciale fonts te gebruiken zoals bijvoorbeeld CSS en Google heeft tegenwoordig zelfs ook een eigen techniek.

Cufon

Een andere mogelijkheid, en dat is hetgeen wat hieronder wordt besproken is het gebruik van Cufon. De ontwikkelaars van Cufon hebben zichzelf als doel gesteld om een waardig alternatief voor Sifr aan te bieden en dat is goed gelukt. Zo is Cufon niet afhankelijk van plugins zoals Flash (wel moet Javascript geactiveerd zijn) en werkt het in alle bekende browsers zoals Chrome, Firefox, Safari en Internet Explorer. De configuratie is vergeleken met Sifr een stuk eenvoudiger en een ander belangrijk punt is dat Cufon sneller is.

Cufon kan bijvoorbeeld ingezet worden om een menu of koppen te voorzien van een speciaal lettertype en onder water is het allemaal SEO friendly. De opmaak wordt middels CSS geregeld zoals je dit met normale koppen ook zou doen. Er is echter ook een nadeel, tekst kan niet geselecteerd worden waar dit met Sifr wel mogelijk is.

Installatie

Er zijn een aantal stappen die je moet doorlopen om gebruik te maken van Cufon. Als eerste heb je het speciale lettertype die je wilt gaan gebruiken nodig. Dit lettertype moet vervolgens via de online generator van Cufon geconverteerd worden.

De generator is hier te vinden: cufon.shoqolate.com/generate/.

Op de pagina selecteer je het bestand via de knop 'bladeren' onder 'Regular typeface'. Alleen TrueType (TTF), OpenType (OTF) en Printer Font Binary (PFB) wordt ondersteund.

Vul onder het kopje 'Use the following value as the font-family of the generated font' de naam in van het lettertype, deze naam gebruik je dan later tijdens de configuratie.

Include the following glyphs

Onder 'Include the following glyphs' selecteer niet alles omdat anders het uiteindelijke bestand onnodig zwaar wordt. Kies onder andere voor Uppercase, Lowercase, Numerals, Punctuation en Basic Latin. Het is wel handig om eventueel eronder nog enkele speciale karakters toe te voegen omdat deze anders niet worden getoond, een lijstje hieronder.

'"~_+-=܀@#$&/|\


Security

Een optie is er om het gebruik van Cufon te beperken tot een specifiek domein om zodoende te voorkomen dat iemand anders gebruik maakt van het speciale font. Vul dan hier het domein in waarop het lettertype wordt gebruikt, dit mag je ook overslaan.

Let's do this!

Loop de overige instellingen even door maar in principe hoef je verder niets te wijzigen. Klik onderaan op 'I acknowledge and accept these terms' en klik daarna op de knop 'Let's do this!'. Het Javascript bestand wordt gemaakt en is klaar om gedownload te worden.

Je hebt dan het lettertype maar om alles te laten werken heb je nog twee extra bestanden nodig. Het gaat om het bestand cufon-config.js waarin de elementen worden gespecificeerd en het bestand cufon-yui.js. Deze bestanden download je hieronder.

Uploaden

Na het downloaden pak het ZIP-bestand uit en plaats het net gegenereerde lettertype ook in deze map. Als dit nog niet het geval is hernoem de map naar 'cufon'.

Open dan het bestand cufon-config.js. In dit bestand geef je aan welke elementen moeten worden voorzien van het speciale lettertype, bijvoorbeeld de H1 en de H2.

Als je het bestand opent zie je onderstaande regel waarin de H1 al is ingesteld met erachter de naam van het font. Vul hier de naam in van het lettertype die je eerder hebt ingevoerd tijdens het genereren van het Javascript bestand.

Cufon.replace('h1', { fontFamily: 'VAGRoundedStd-Bold' });


Op dezelfde manier plaats je eventueel meerdere regels. Upload vervolgens de map met bestanden naar je website en plaats in het <head> gedeelte de onderstaande volgende code. Let wel op dat de paden van de bestanden kloppen en pas hier de bestandsnaam 'VAGRoundedStd-Bold_700.font' aan naar de naam van je eigen lettertype bestand.

<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/VAGRoundedStd-Bold_700.font.js" type="text/javascript"></script>
<script src="cufon/cufon-config.js" type="text/javascript"></script>


Zodra je dit hebt gedaan en alles klopt dan werkt Cufon. De volgende stap is het opmaken van de koppen, dit gaat met behulp van CSS zoals je dit normaal ook zou doen.

De onderstaande regel is bijvoorbeeld voorzien van een speciaal lettertype.

Tekst Cufon

Hover

Nu zul je merken dat als je cufon gebruikt voor links zoals in een menu dat een 'hover' niet standaard werkt. Het instellen van bijvoorbeeld een wijziging van kleur op het moment dat je met de muis over een link gaat zal standaard niet werken. De vermelding in het cufon-config.js bestand zal dan iets uitgebreid moeten worden zoals hieronder in het voorbeeld.

Je ziet de standaard regel waarin het element is ingesteld met het bijbehorende lettertype, echter in dit geval staat er boven nog een klein stukje dat te maken heeft met de 'hover'.

Cufon.replace('div#menu a', {
hover: true
});
Cufon.replace('div#menu a', { fontFamily: 'VAGRoundedStd-Bold' });