Als een klant of extern buro een afwijkend font wil gebruiken op internet geven wij normaal 1 van 3 antwoorden:

• NEEEE!!! doe dit alsjeblieft niet en kies maar uit dit matrix van geinstalleerde fonts
• kan voor kopjes, met sIFR (Flash) maar dit is niet ideaal. Er is een vertraging eer het zichtbaar is en het is erg lastig te finetunen
• kan voor kopjes, door het genereren van afbeeldingen maar dit is ook niet ideaal. Het brengt opmaak beperkingen met zich mee, is lastig te finetunen en de afbeeldingen zijn wel goed maar niet geweldig in kwaliteit

Dit is erg jammer, want er zijn best hele mooie gratis webfonts beschikbaar

Font replacement zonder Flash of gegenereerde afbeeldingen

Gelukkig zijn er recent twee sIFR alternatieven ontwikkeld die geen plugins gebruiken: sinds het voorjaar is er Cufón en, sinds een paar weken, Typeface.js.
Beide werken door een font om te zetten naar vector informatie in javascript code dat in de browser door middel van het canvas-object en svg wordt weergegeven. Doordat ze niet gebruik maken van een plugin werken ze een stuk sneller. Canvas en svg worden al een paar jaar door alle moderne browsers ondersteund, op eentje na. En daar hebben ze ook een oplossing voor.
In de vorige eeuw implementeerde Microsoft een proprietary variant van de Virtual Reality Markup Language, VML en hoewel VML een snelle en stille dood is gestorven ondersteunen de browsers nog steeds deze vectortaal. Zowel Cufón als Typeface.js gebruiken VML om de vectoren weer te geven in de verschillende IE's.

Beide oplossingen converteren text per woord waardoor word-wrap en <br>'s blijven werken. Er zijn ook een paar verschillen tussen de twee:

• met Cufón is het niet mogelijk text te selecteren, met Typeface.js wel
• voor Typeface.js kan je alleen truetype fonts converteren, voor Cufón truetype en opentype
• Cufón is makkelijk te combineren met jQuery
• Typeface.js levert iets grotere .js bestanden op

Maar deze 2 methoden, die nog volop in ontwikkeling zijn, zijn net als sIFR slechts hulpmiddelen bij gebrek aan beter.

Zoals het hoort: @font-face

Ook al in de vorige eeuw bedachten de toen twee grote webbedrijven dat er native support zou moeten zijn voor niet-geinstalleerde fonts door middel van stylesheets. Hiervoor werd de @font-face constructie ontwikkeld maar elk bedrijf bedacht hiervoor zijn eigen proprietary font formaat en de font foundries (= font warenhuizen) gingen er niet in mee.

Maar nu is @font-face een onderdeel van CSS3 en is het, zo eind 2009, geimplementeerd in de modernste 2 browsers, Firefox 3.5 en Safari 4 (Google Chrome loopt nog achter). Met @font-face kunnen deze browsers nu rechtstreeks opentype en truetype fonts weergeven.

Een mogelijke implementatie lijkt voor de hand te liggen, snif met javascript naar modern @font-face support en gebruik bij een negatief Cufón of Typeface.js. Ik heb dit zelf zo snel niet aan de praat gekregen maar het werd dan ook overschaduwd door een nog veel mooiere oplossing:

Één oplossing voor (bijna) alle browsers, zonder code

Meerdere mensen hebben de afgelopen maanden gezocht naar de ideale, standaard compliant @font-face oplossing en dit heeft geresulteerd in de volgende oplossing:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

Deze ultieme oplossing werkt in vrijwel alle gangbare browsers door gebruik te maken van slimme fallbacks op de verschilende platformen en werkt als volgt:
Voor Internet Explorer wordt verwezen naar het proprietary filetype (Embedded Open Type) dat ze 11 jaar geleden ontwikkeld hebben. Microsoft probeert dit nu bij de W3C als standaard erkent te krijgen.
Daarna wordt geprobeert het font lokaal op te halen, de Internet Explorers snappen dit en het koppelen van meerdere bronnen niet en haken hier af.
De 2 modernste standaard compliant browsers zullen nu het eerste herkenbare font formaat ophalen (opentype of truetype). Google Chrome snapt dit nog niet, maar kan wel het .svg formaat lezen (het is onderdeel van de svg specs).
Het .woff bestandstype wordt ondersteund door Firefox 3.6 (voorjaar 2010) en is bedoeld als specifiek webfont, niet zo heel anders als de oorspronkelijke bedoeling achter Microsoft's .eot formaat maar het krijgt wel steun van de font foundries en lijkt dus een kans van slagen te hebben. Na meer dan 15 jaar lijken deze bedrijven eindelijk door te krijgen dat het internet belangrijk is. Zo kunnen deze bedrijven dus specifieke font varianten aanleveren die op internet gebruikt mogen worden.

Voor oudere versies van Firefox, Safari, Chrome en Opera en voor mobiele browsers kunnen alternatieve fonts gedefinieerd worden zoals dat al gebruikelijk is (font-family: "Your typeface", Arial, sans-serif;) of kan gebruik worden gemaakt van het eerdergenoemde Cufón of Typeface.js.

Een nadeel van deze methode is verder nog dat style-linking niet wordt ondersteund in IE en fout werkt in Opera. Hierdoor is het niet mogelijk aan te geven dat bepaalde font bestanden stijlen zijn (zoals bold of italic) van een ander font. Voor deze stijlen moet je dus in de stylesheet de juiste font-family definieren.

Doordat je geen font vervangt met deze methode kan je dus ook een eigen font gebruiken voor bodytekst en niet uitsluitend voor koppen maar daar moet je wel mee oppassen. Bij een redesign van BoingBoing kwamen ze erachter dat voor Windows XP gebruikers de site onbruikbaar was. Dit komt omdat onder WinXP font-smoothing standaard uit staat en het door hun gekozen font zo onleesbaar was geworden op kleine pixelgrootte. Kennelijk hebben ze niet goed getest met IE6 op een virtual pc.

De grootste drempel

Het grootste probleem met het gebruik van afwijkende fonts blijft echter de licensering. Met al deze technieken worden de fontgegevens naar de client gestuurd en dit moet dus wel toegestaan zijn in de licentie die bij het font horen. En de technieken zijn nog zo nieuw dat die licenties lang niet altijd zo duidelijk zijn. Vaak verwijst font-embedding in een licentie alleen naar fontgebruik in downloadbare pdf bestanden.

Aan de slag

Als je een font wel online mag gebruiken is er bij Font Squirrel een handige online tool om het font naar de gewenste formaten om te zetten.
Als je een huisstijl font niet online mag gebruiken kan het de moeite lonen om te kijken naar een gratis alternatief wat er op lijkt, ook bij Font Squirrel kan je er tientallen als @font-face kit downloaden.

Nog wat meer info:
Uitleg hoe deze methode precies werkt
Webfonts wiki
@font-face and performance

Misschien ook wel interessant:
TypeKit, @font-face als een service waarop je je abonneert