Niet standaard fonts gebruiken op je website

Zoals je wellicht al weleens gezien hebt wordt op sommige websites voor de kopjes een niet standaard font gebruikt. Dit gebeurt zonder JavaScript of Flash.

Je kunt dit in moderne browsers via CSS inladen. Zolang je een alternatief font (van ongeveer dezelfde grootte) specificeert, laten browsers die dit niet ondersteunen het alternatief font zien en doe je weinig tot geen afbreuk aan de layout.

Hoe doe je dit?

Bekijk het volgende CSS:

@font-face {
font-family: FolksRegular;
src: url('Folks-Normal-webfont.eot');
src: local('☺'), url('Folks-Normal-webfont.woff') format('woff'), url('Folks-Normal-webfont.ttf') format('truetype'), url('Folks-Normal-webfont.svg#webfontxkx2z9RR') format('svg');
}

Eerst geven we een naam op voor de font-family. Dit mag op zich elke naam zijn. Je kunt het best een naam opgeven dat overeenkomt met de naam van het font. Vermijd spaties in de naam of gebruik aanhalingstekens.

Vervolgens specificeren we ons niet standaard font voor Internet Explorer met src: url(‘Folks-Normal-webfont.eot’);.

Op de volgende regel geven we het font op voor andere browsers zoals Firefox en Safari. Firefox gebruikt normaal gesproken het woff bestand, Safari het ttf bestand en de iPad het svg bestand.

Dit stukje CSS moet je bovenaan je stylebestand zetten. In ieder geval voordat je het font gaat gebruiken. En dat is de tweede en laatste stap die je zou moeten toepassen in het CSS.

h1 { font-family:FolksRegular,Arial,sans-serif; font-weight:normal;}

Als ons eigen font FolksRegular goed is ingeladen dan wordt dit gebruikt. Anders wordt Arial gebruikt (indien aanwezig op het systeem van de bezoeker) of het algemene font ‘sans-serif’.
Ik geef hierboven tevens een normale font-weight op omdat dit lettertype nogal ‘dun’ is. Het komt dan beter overeen met het alternatief font.

Uiteraard moet je ook even de opgegeven bestanden uploaden naar je webserver

Ondersteuning

Als je het @font-face opgeeft zoals hierboven in het voorbeeld is beschreven dan wordt het font goed weergegeven in Internet Explorer 6+, Safari 3+, Firefox 3.5+, Chrome en Opera 10+. Zelfs op de iPad werkt het.

Hoe kom je aan dergelijke fonts?

Er is een hele mooie website waar je complete ‘kits’ kunt downloaden inclusief een demo.
http://www.fontsquirrel.com/fontface

Je ook fonts uploaden en om laten zetten naar de genoemde ‘kits’ via de fontface generator. Let wel op dat vanwege auteursrechten niet alle fonts zomaar ingesloten mogen worden op websites.

Let op met Firefox en subdomeinen

Let op als je fonts insluit die niet op exact hetzelfde (sub)domein staan. Bijvoorbeeld cdn.mijndomeinnaam.nl is volgens Firefox een ander domein dan www.mijndomeinnaam.nl. Firefox staat het cross domain insluiten van fonts niet toe.
Je kunt Firefox vertellen dat het goed is door in je .htaccess bestand de volgende code op te nemen:

<FilesMatch "\.(ttf|otf|eot|woff)$">
 <IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 </IfModule>
</FilesMatch>

Mocht je geen .htaccess kunnen gebruiken (of als je webhoster geen mod_headers ondersteunt) dan is de oplossing te zorgen dat de fonts op hetzelfde (sub)domein staan als waar je ze gebruikt.

Demo

Een voorbeeld van niet standaard fonts vind je hier.

Tweeten