@font-face is tegenwoordig een realistische optie voor ‘crossbrowser’ (exotische) typografie. Je kent alle voordelen t.o.v. bijv. oplossingen als sIFR en Cufon wrs. wel: ‘echte tekst’ (dus selecteerbaar en indexeerbaar), true-type opties zoals Ligatures en advanced Kerning, minder processor intensief etc.
In tegenstelling tot b.v. sIFR of Cufon is @font-face tekst dus ook te gebruiken als body-tekst. Dit uiteraard wel afhankelijk van het gekozen font etc.
Jammergenoeg is een crossbrowser @font-face implementatie nog een enorme PITA! Het zou makkelijk moeten zijn maar is echt vrij lastig. Hoewel het onder de CSS spec valt, moet je nog allerlei ‘hacks’ gebruiken om het overal goed te laten werken. Dit heeft o.a. te maken met het feit dat er een heleboel issues rondom licensing en security is en dergelijke en dat browserboeren dus verschillende formaten en implementaties ondersteunen.
Hier wordt wel druk aan gewerkt met o.a. de ontwikkeling van een ‘standaard’ web embeddable font formaat: het Web Open Font Format (WOFF) http://hacks.mozilla.org/2009/10/woff/.
Totdat alle browser WOFF ondersteunen zit er niets anders op dan lastige ‘hacks’ te gebruiken.
@font-face is niet altijd een goede oplossing. Allereerst moet de Fontmaker ‘web embedding’ ondersteunen/licensen. Dat gebeurt nog lang niet altijd. Daarnaast zijn veel ‘exotische’ fonts niet echt geschikt als broodtekst. Je zult dus altijd rekening moeten houden met leesbaarheid etc. Verder zijn de font-files zelf vaak vrij fors qua filesize: je kunt zomaar een TTF van 100+kb hebben. Dit gaat ten koste van de laadtijd van de pagina, helemaal als je bedenkt dat er ook 1 (of meer!) extra HTTP request voor nodig is.
Zorg er altijd voor dat je een goede standaard CSS fallback hebt (denk Arial, Verdana, Georgia, etc). Zorg er daarnaast voor dat je @font-face geoptimaliseerd is: als je je font-file zelf genereert, denk dan aan ‘subsetten’, compressie etc.
Op http://html5boilerplate.com vindt je een voorbeeld .htaccess bestand waarin ook voor @font-face wat optimalisaties zitten.
Als @font-face embedding niet ‘mag’ of op een andere manier niet de beste optie lijkt zou ik, als je echt exotische fonts wilt gebruiken, kiezen voor Cufon.
Om een indruk te krijgen van alle issues rondom @font-face (support) moet je voor de grap de volgende posts maar eens lezen. Alle updates en edits geven wel aan wat een PITA het nog is:
Er wordt enorm veel (onzin) geschreven rondom @font-face. Bijna iedereen schrijft wel een ‘bulletproof @font-face’ post. De meeste daarvan zijn onvolledig of incorrect.
Bespaar je de moeite: ‘Your best bet is @paul_irish’ :-)
Achtergrond: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax
Voor zover ik weet is Paul Irish’ ‘Bulletproof Smiley Hack’ op dit moment de beste oplossing om (handmatig) crossbrowser @font-face toe te passen: http://paulirish.com/2010/font-face-gotchas/#smiley
Als je handmatig @font-face wilt toepassen zou ik dus Paul Irish’ smiley methode gebruiken. Dit betekent nog wel dat je zelf je font moet converteren naar verschillende formaten (zoals EOT, SVG en evt WOFF). Dat kan gelukkig tegenwoordig ook steeds vaker via online services.
NOTE Voor EOT maken de meeste diensten gebruik van het bekende ttf2eot script. Het is bekend dat @font-face hiermee soms niet goed werkt. Voor zover ik weet geeft Font Squirrel de beste resultaten
Microsoft levert zelf ook een programma om (TTF) naar EOT te converteren: WEFT. Tip van de dag: blijf mijlenver van WEFT vandaan! :-)
Gelukkig zijn een aantal (commerciële) diensten ingesprongen op de nood. Zo zijn er inmiddels een heel aantal ‘@font-face generators’ die een standaard @font-face pakket beschikbaar stellen.
Het bekendste (en IMHO beste) voorbeeld is http://www.fontsquirrel.com/
Op Font Squirrel kan je zoeken naar een font en vervolgens een ‘@font-face KIT’ genereren. Dit is kant-en-klaar te gebruiken.
Google is ook ingesprongen en stelt op een simpele manier (CSS link only) embeddable webfonts beschikbaar via https://code.google.com/apis/webfonts/
Omdat met deze (Google CSS Link) manier nog steeds wat issues (kunnen) zijn (zoals de ‘Flash Of Unstyled Type’ FOUT) is er de Webfont Loader: https://code.google.com/apis/webfonts/docs/webfont_loader.html
Hiernaast zijn er inmiddels een aantal diensten die ongeveer hetzelfde doen, maar fonts (i.v.m. licensing) niet als ‘pakketjes’ beschikbaar stellen maar via een Javascript API.
De grootste commerciële Font Foundries zijn een partnership aangegaan met deze diensten (waarvan TypeKit op het moment de grootste en bekendste is) en stellen hun (commerciële) fonts beschikbaar om te embedden. De gebruiker betaald een fee en kan, via de dienst, de fonts embedden.
Voordeel is dat je commerciële fonts mag gebruiken, dat het doodsimpel is en dat je niets zelf hoeft te coden. Alle fonts zijn ook zelf te ‘subsetten’ (gebruik bv. niet alle characters en features voor een kleinere filesize), etc.
(Groot) nadeel is wel dat je (meestal) voor deze diensten moet betalen en dat Javascript een noodzaak is.
Lijstje links ter lering ende vermaeck: http://www.delicious.com/davidhund/font-face of natuurlijk http://www.delicious.com/popular/font-face