Heb je een prachtig grafisch ontwerp voor een website, maar is er (in Photoshop) een font gebruikt dat niet standaard op de PC voorkomt? Dan heb je de volgende opties:

• Je gaat het ontwerp exporteren in losse afbeeldingen en deze in de HTML aanroepen met een <img>-tag. Maar ja, Google is daar niet zo dol op en hoewel je met alt-tags een hoop op kunt lossen, vinden zoekmachines tekst-links toch prettiger.
• Je gaat fonts vervangen of embedden in de HTML.

mogelijkheden

Als je fonts wilt vervangen of embedden in de HTML, zijn er tot op heden 4 mogelijkheden:

• sIFR (Scalable Inman Flash Replacement, ontwikkeld door Shaun Inman)
• P+C DTR (PHP + CSS Dynamic Text Replacement, bedacht door Alex Giron)
• TFF (True Font Family, bedacht door Remon Lammers)
• EOT font embedding (Embedded OpenType File Format, bedacht door Microsoft)

sIFR

Werking van sIFR

sIFR werkt in grote lijnen als volgt:

een HTML pagina wordt in de browser geladen »» Javascript controleert of Flash is geinstalleerd en zoekt specifieke tags »» de tekst die binnen zo’n tag valt, wordt als variabele naar een SWF (Flash movie) gestuurd »» ActionScript in die SWF “tekent” dan de tekst in het gewenste font op het scherm »» je kunt vervolgens de eigenschappen van de tekst door middel van standaard CSS aanpassen.

Flash en Javascript moeten dus in de browser geactiveerd zijn!

sIFR zelf proberen

Klik voor een tutorial en een werkend voorbeeld hier. In deze tutorial wordt uitgegaan van gedegen kennis van HTML en CSS.

Nadelen van sIFR

• In principe gebeurt de rendering door de ActionScript razendsnel. Toch kan men een kleine flikkering zien als de browser niet snel genoeg reageert. Wees daarom ook zuinig: ga geen hele lappen tekst vervangen, maar alleen titels e.d.!
• Werkt alleen met True Type fonts (TTF), niet met Open Type fonts (OTF). update: opgelost in versie 3.
• Niet alle browsers, maar wel de grotere, kunnen transparantie aan, m.a.w. bij sommige browsers treedt het verschijnsel op dat de achtergrondkleur van de pagina niet zichtbaar wordt door de tekst heen.
• Op het moment van schrijven waren er nogal wat problemen met de Safari browser, die wellicht in een latere release zijn opgelost.
• Om SWF’s met het door jou gewenste font te maken, heb je een programma nodig dat Flash 6 movies kan exporteren (b.v. Flash zelf)
• sIFR kan geen display:inline aan. Dus als je meerdere CSS block elementen naast elkaar wilt zetten, heb je een probleem. Wil je meerdere inline elementen naast
  elkaar zetten, dan verschillen deze in grootte. update: opgelost in versie 3.
• sIFR ondersteunt geen A HREF’s. update: opgelost in versie 3.

P+C DTR

Werking van P+C DTR

P+C DTR werkt als volgt:

De PHP scripting taal maakt op basis van een TTF of OTF bestand een dynamische PNG. Door middel van PHP wordt een CSS tag vervangen door deze dynamische PNG.

Groot voordeel hiervan is dat je geen extra programma’s (zoals Flash) nodig hebt, maar de PHP functie gewoon kunt aanroepen in je bestaande HTML/PHP script.

P+C DTR zelf proberen

Klik voor een tutorial en een werkend voorbeeld hier. In deze tutorial wordt uitgegaan van kennis van HTML en PHP.

Nadelen van P+C DTR

• Het is een server side functionaliteit. Dat wil zeggen dat er een scripting taal op jouw server geinstalleerd moet zijn.
  Dit voorbeeld gaat uit van PHP (versie 4.3 of hoger), maar soortgelijke functionaliteit is natuurlijk ook te herschrijven in .NET, ASP, Perl of JSP.
• Het script maakt gebruik van de GD library (versie 1.6 of hoger). Deze moet tijdens (her)installatie van jouw scripting taal meegecompileerd zijn.
• De code in dtr.php en/of headings.css kan storend werken voor je reeds bestaande PHP scripting of stylesheet.
  Ik kreeg bijvoorbeeld problemen in Internet Explorer 7
  toen ik mijn html tag op 100% hoogte zette (html {height:100%;}).
• De styling is heel beperkt, line-height werkt bijvoorbeeld niet.
• P+C DTR werkt alleen met header tags, niet met classes.
• In de headings.css wordt de bestandsnaam van het font zonder extensie aangeroepen (b.v. AMBER in geval van AMBER.ttf). Zorg ervoor dat de extensie van dit bestand lowercase is,
  anders werkt het niet.
• Wijzigingen in (de kleuren in) headings.css worden niet altijd goed ververst bij het herladen van de pagina.
• Hoewel de zoekmachine de tekst al “platte tekst” ziet, kun je deze niet selecteren. Het is niet noodzakelijk, maar kunnen selecteren van tekst kan handig zijn.

TFF

Werking van TFF

Als reactie op de allereerste versie van deze post, stuurde Remon Lammers mij een mailtje om me te wijzen op de techniek die hij zelf heeft ontwikkeld.

TFF werkt als volgt:

TFF lijkt op P+C DTR in zoverre, dat de PHP scripting taal op basis van een TTF een dynamische PNG aanmaakt. De aanroep gebeurt echter door middel van Javascript.

Groot voordeel hiervan is dat je a) geen extra programma’s (zoals Flash) nodig hebt en b) dat je je styling volledig 100% in CSS kunt doen.

TFF zelf proberen

Klik voor een tutorial en een werkend voorbeeld hier. In deze tutorial wordt uitgegaan van kennis van HTML, CSS en PHP.

Nadelen van TFF

• Net als bij P+C DTR is het nodig dat er een scripting taal op de server geinstalleerd moet zijn.
• Het script maakt gebruik van de GD library.
• Hoewel de zoekmachine de tekst al “platte tekst” ziet, kun je deze niet selecteren.
• De volledige versie is niet gratis (€ 19,=), de beperktere versie wel.

Het moet gezegd worden dat tegenover deze nadelen, wel een aantal belangrijke voordelen staan:

• De code wordt heel goed onderhouden, ook op basis van suggesties van derden.
• De code gaat vergezeld van een duidelijke website, met een periodieke weblog.
• Vragen en opmerkingen worden razendsnel (in het Nederlands) beantwoord.

Bovenstaande is absoluut geen verkooppraatje, maar open-source programmatuur staat nog weleens op websites met rommelige (Engelstalige) forums, waarbij je de kans loopt dat jouw vraag net niet beantwoord wordt.

EOT font embedding

Werking van EOT font embedding

Het EOT font formaat is bedacht en ontwikkeld door Microsoft. Het komt erop neer dat een TTF of OTF font wordt geconverteerd naar een voor een browser begrijpelijk formaat. In combinatie met de CSS tag “@font-face” waarvan het src-attribuut verwijst naar een .eot bestand, kunnen classes worden aangemaakt in een stylesheet.

In beginsel werkte dit alleen voor Internet Explorer 4 of hoger en hoewel er nog steeds geluiden zijn dat font embedding tot vreemde resultaten kan leiden in Mozilla based browsers, heb ik tot nu toe geen problemen gehad met Firefox 2.0.

Er bestaat een cross-browser alternatief voor EOT files; de Truedoc technology van Bitstream, die PFR bestanden genereert. Aangezien deze PFR fonts alleen op bestelling door Bitstream worden verkocht, laten we deze hier buiten beschouwing.

Afgezien van het feit feit dat je Microsofts WEFT (software alleen voor Windows!) nodig hebt om een EOT bestand aan te maken, is het absolute voordeel dat het resultaat alleen uit HTML/CSS bestaat. Jammer genoeg is is deze CSS niet W3C compliant (bedankt Emile van Netcreators voor je commentaar!).

EOT zelf proberen

Klik voor een tutorial en een werkend voorbeeld hier. In deze tutorial wordt uitgegaan van gedegen kennis van HTML en CSS.

Nadelen van font embedding met EOT

• Je hebt client software nodig (Microsofts WEFT), maar deze is wel weer gratis beschikbaar.
• Hoewel de EOT fonts niet enorm in omvang waren, merkte ik toch duidelijk vertraging bij het laden ervan.
• WEFT doet iets vreemd met de anti aliasing van het font, waardoor het er niet altijd even mooi uit komt te zien.
• De CSS code is niet W3C compliant.
• WEFT wordt al jaren niet meer onderhouden.

Conclusie

Welke methode is nu de beste?

Allereerst hangt het er van af, in welke browsers elke methode moet werken. Ik heb getest met Internet Explorer, Firefox en Safari, en hoewel je dan de grootste groep surfers wel hebt ondervangen, zijn er natuurlijk nog andere spelers op de markt.

TTF kwam op mij duidelijk als snelste over. Ik had een klein probleem, wat na een emailtje resulteerde in een upgrade (nog geen halve dag later!). Op de website wordt vermeld dat vrijwel ALLE bestaande browsers worden gesupport (niet alleen de 3 of 4 grootste).

Ik moet wel zeggen dat ik de gratis versie heb geprobeerd, dus niet weet hoe de (uitgebreidere) betaalde versie zich gedraagt.

P+C DTR was ook heel snel, maar hoewel deze pure HTML/CSS rendert, waren er hier en daar wat browsereigenaardigheden. Ik heb de ontwikkelaar op de hoogte gebracht, dus wellicht: wordt vervolgd. P+C DTR en TTF vallen beide af, als je niet over PHP op je server beschikt.

sIFR heeft als voordeel dat het client-based is, maar als nadeel dat de Flash plugin geinstalleerd moet zijn. Aan de andere kant beweert Adobe dat dit
op 98% van de Internet PC’s het geval is (met dank aan Youtube en andere movie websites?).

EOT embedding is natuurlijk het schoonst, omdat het W3C compatible HTML en CSS toont, zonder dat er externe scripts benodigd zijn. Maar EOT is naar mijn mening weer niet de snelste methode en toont het font niet altijd even fraai.

And the winner is…

Op basis van snelheid, browser compatibility en onderhoud, zou ik zeggen: TTF.

Aanvulling

Cees Rijken, 22 januari 2009

David Chester heeft een nieuw concept ontwikkeld op basis van Javascript en DOM-functionaliteit. Ik heb nog geen tijd gehad om het door te nemen, dus wordt vervolgd…
Voor meer informatie: http://typeface.neocracy.org/ en
http://www.madasplayground.com/fonts/.

Ook bestaan er geruchten dat de font-face-tag (opnieuw?) ondersteund gaat worden in de grotere browsers. Dit blaast wellicht nieuw leven in EOT embedding….

Bronnen en links:

Mike Davidson, http://www.mikeindustries.com/
Joao Makray, http://www.joaomak.net/util/dtr/
Remon Lammers, http://www.truetypefontfamily.com
W3C, http://www.w3.org/Submission/2008/SUBM-EOT-20080305/