Artikelen

Gepost door joost op 25 okt 2010 in de categorie HTML Algemeen

Een custom lettertype op je website? Dat kan toch niet? Een font embedden kan toch alleen in Flash, niet in HTML? Ja wel met font-face. Maar hoe werkt het precies... en werkt het wel ECHT? Let me explain.


Voor welke browsers?
De browser support is 99%... kijk zelf maar:
IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), Safari (PC & Mac), Opera 10, Chrome 4+
of bekijk de demo: http://www.bewired.nl/uploads/fckbeans/


Hoe werkt het dan?
Het is HELEMAAL niet moeilijk om te implementeren... kijk maar. Je roept eerst de @font-face selector aan en definieert de class waarin hij wordt aangeroepen.

@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('?'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
font-weight: normal;
font-style: normal;}


Wat betekent deze code?
Dat 'local' staat er om IE te misleiden. Voor andere browsers (met een juiste interpretatie van 'font-face') betekent het dat hij lokaal moet zoeken naar een font dat '?' heet. Uiteraard vindt hij niets en zal hij daarna het door jou gespecificeerde font gebruiken. Je kunt 'local' dus NIET weglaten omdat het IE misleidt (die snapt door 'local' de rest van die regel niet meer en dat is goed). Vervolgens worden er verschillende font-types aangeboden en (niet onbelangrijk) wordt de font-weight en de font-style op normal gezet. Dit is belangrijk omdat IE anders de neiging heeft om een bolder font weer te geven.


Hoe kom ik aan deze font-types?
Zoek een TTF formaat op en zet hem eenvoudig om naar de juiste formaten dankzij de geweldige service van FontSquirrel: http://www.fontsquirrel.com/fontface/generator. 


Vreugdedans?
Nog niet... Ten eerste is het toch niet altijd even mooi. Er zijn browsers die (vooral op oudere computers) de fonts erg pixelig renderen. Dit kan een reden zijn om toch terug te grijpen op het oude vertrouwde genereren van plaatjes met php. Deze renderen ook op oude computers altijd mooi.

Daarnaast moet je goed uitkijken welk font je online zet. Het gebruik van 'free fonts' (meestal bestaande uit subsets van het totale font) is meestal wel legaal, maar de meeste volledige fonts (met een groot aantal characters) hebben strenge copyrights. Je zou kunnen overwegen om als bestandsnaam iets te gebruiken dat de zoekmachines niet triggered, maar je kunt ook even zoeken naar een gratis subset die voldoet voor je toepassing. Dit geldt in theorie uiteraard ook voor de php oplossing, maar PHP is server-side. Daardoor kan de bezoeker niet achterhalen waar het font staat en kan hij/zij het dus ook niet downloaden/rippen.


Inpiratie/met dank aan
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontsquirrel.com/fontface/generator