Cufon vs Font-face lettertype embedden
Geschreven door Leander Snijders maandag, 28 november 2011 12:29
Op internet zijn we als webbouwers altijd vrij beperkt geweest in de keuze van lettertypes die gebruikt kunnen worden. In het verleden was het alleen mogelijk om lettertypes te gebruiken die daadwerkelijk op het systeem van de bezoeker zijn geinstalleerd, je komt dan snel uit op een lijstje als “Arial”, “Tahoma”, “Verdana”, etc. Het einde van het gebruik van alleen een hand vol standaardlettertypes voor websites is echter nabij.
Inmiddels zijn er diverse oplossingen op lettertypes te embedden, bij VisionEars maken we momenteel gebruik van Cufon voor het embedden van lettertypes, de @font-face optie is echter in opmars. Blijven we Cufon gebruiken of stappen we over naar @font-face?
Cufon
We hebben al eerder geblogd over Cufon en het gebruik ervan:
Het gebruik van Cufon is relatief eenvoudig. Je upload de betreffende scripts naar je website, converteert je lettertype van een cufon script via de cufon font generator en stelt wat CSS regels in.
Cufon werkt vrijwel in elke browser en maakt gebruik van Javascript. Javascript moet dus wel geactiveerd zijn maar dat is uiteraard geen probleem in de moderne browser.
Font-face
Font face was in 1998 in de CSS2 specificatie toegevoegd om lettertypes te embedden op pagina’s door middel van de @font-face regel. Deze manier zorgt er voor dat een bezoeker een ontwerp bekijkt zoals het bedoeld is; met mooie lettertypes. Helaas werd font-face niet geïmplementeerd in browsers en werd font-face zelfs verwijderd uit de CSS 2.1 aanbevelingen.
Met de komst van CSS3 is font-face weer terug, echter is de implementatie cross-browser wat lastiger dan bij bijvoorbeeld Cufon. Alle grote browsers hebben namelijk besloten hun eigen weg in te gaan met ondersteuning van formaten:
- Internet Explorer ondersteunt alleen EOT
- Mozilla browsers ondersteunen OTF en TTF
- Safari en Opera ondersteunen ORF, TTF en SVG
- Google Chrome ondersteunt TTF en SVG
- Verder mobiele browsers (Safari op iPad en iPhone) ondersteunen SVG
Gelukkig zijn er wat ontikkelaars op zoek gegaan naar een syntax die het mogelijk maakt @font-face toch cross-browser werkend te krijgen. De meest populaire methode is de Bulletproof @ Paul Ierse's font-face syntax. Deze hebben wij gecombineerd met de Mo' Bulletproofer syntax.Met behulp van deze methode kun je meerdere versies van een lettertype embedden zodat het werkt op alle browsers. Daarnaast bevat de code een kleine truc die lokaal geïnstalleerde lettertypen negeert met dezelfde naam. Hoewel het laden van een lokaal lettertype veel sneller gaat is het echter beter deze niet lokaal te laden om rommelige resultaten te voorkomen.
Voorbeeld van de Mo' Bulletproofer syntax:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg')
local('nofnt');
font-weight: normal;
font-style: normal;
}
Allereerst declareren we een identifier voor de rest van de code. Vervolgens refereren we naar de EOT versie van het lettertype voor Internet Explorer. Als de browser niet Internet Explorer is zal deze regel genegeerd worden en verder gaan tot dat er een font-type is gevonden dat ondersteund wordt. Helaas zit er een bug in oudere Internet Explorer (<IE9) waarvoor een fix is toegevoegd die er voor zorgt dat IE geen 404 errors geeft.
De src.local is een truc om een fictieve font te gebruiken die niet aanwezig is op het systeem van de bezoeker zodat er niet per ongelukt een ander font wordt weergegeven.
Tot slot zal het instellen van de font-weight en font-style er voor zorgen dat alle browsers standaard dezelfde waarden hanteren, deze kun je later overrulen met andere CSS. Als je de font-weight en font-style hier niet opneemt zillen Webkit browsers het gewicht of de stijl van het lettertype negeren.
Houd altijd in gedachten dat de resultaten van font rendering in verschillende browsers en besturingssystemen flink kunnen variëren. Veel ontwikkelaars hebben dusdanig veel problemen met de resultaten dat deze het gebruik van alternatieve lettertypes in Internet Explorer zelfs compleet vermijden. Test dus altijd de resultaten in verschillende browsers.
Mocht je bovenstaande syntax op een IIS server draaien dan kan het zijn dan het font niet zichtbaar is, voer hiervoor het WOFF formaat toe aan de lijst van MIME types of verander het formaat eot naar embedded-opentype.
Voordelen en nadelen Cufon en @font-face
Cufon
Voordelen:
- Consistente font rendering (goede support in verschillende browsers)
- Eenvoudiger te implementeren dan bijvoorbeeld Sirfr
- Fonts worden helderder en strakker weergegeven van bij @font-face
Nadelen:
- Mogelijk tragere laadtijd (gebruik dus alleen voor headings, titels en subtitels)
- Restricties van fonts embedden door EULA (End User License Agreement)
Font-Face
Voordelen:
- Web standaarden (Font styling support)
- Laad sneller dan Cufon
- Fonts worden iets minder strak gerenderd dan met Cufon
Nadelen:
- Inconsistentie tussen browsers, met name slecht in Windows XP zonder cleartype
- Het is alleen toegestaan Open Source fonts te gebruiken
- Verschillende lettertypes moeten embed worden voor cross-browser support
Conclusie
Uiteindelijk zal font-face de standaard worden, wij blijven echter voorlopig Cufon gebruiken omdat we over de resultaten erg tevreden zijn. Over het algemeen gebruiken we de speciale fonts alleen voor titels en dergelijke en daarnaast is de kwaliteit van tekst die met Cufon gerenderd is toch net iets strakker. Mocht dit in de toekomst verbeterd worden in browsers dan zullen ook wij overgaan naar font-face.
