Weblayouts maken in Photoshop kan en gebeurt al jaren. Een belangrijke beperkende factor daarin was het gebruik van lettertypes. Om een font weer te geven moet dat op de PC van de gebruiker aanwezig zijn, zodat je al snel beperkt bent tot een lijstje van 10 à 20 lettertypes. De afgelopen maanden is op dat gebied veel veranderd en in alle belangrijke browsers is het nu mogelijk om 'vreemde' lettertypes te gebruiken door middel van font embedding.
Jammer genoeg is er echter (nog) geen standaard opgesteld, elke browser doet het dus op z'n eigen manier. Voor mijn profielwerkstuk heb ik me in deze technieken verdiept, hier deel ik de kennis die ik heb verworven met jullie.
Introductie tot lettertypes
Maar eerst: een introductie tot lettertypes en typografie in het algemeen. Een lettertypebestand bevat vectorafbeeldingen (oneindig schaalbaar zonder kwaliteitsverlies) van alle karakters die in het font aanwezig zijn. Elke stijl (normaal, vet, cursief, narrow/condensed en combinaties daarvan) heeft een eigen bestand. Kijk maar eens in de lettertype-map op je PC (via Configuratiescherm -> Lettertypes): van de bekende fonts zijn talloze varianten beschikbaar. Officieel kun je alleen een vetgedrukte letter gebruiken als je het vetgedrukte font op je PC hebt geïnstalleerd.
Adobe InDesign houdt zich daar zeer strict aan. Photoshop vormt de middenweg: er zijn verschillende 'font variants' beschikbaar (regular, italic, bold, enzovoorts) maar er is eveneens een mogelijkheid om een letter vet te maken (via een speciale knop in het Type-panel). Als er dus geen apart 'vet' lettertype aanwezig is, verbreedt het programma de letters automatisch tot een vetgedrukt font. Niet netjes, maar het werkt wel.
Typografie gaat nog veel en veel verder, maar het is belangrijk om deze basis in gedachten te houden. Sommige browsers kiezen namelijk de aanpak van Photoshop (en 'dwingen' naar wens een dikgedrukte variant van het lettertype af), andere webprogramma's geven alleen een bold font weer als er ook een bold fontbestand is.
Webfonts in de belangrijke browsers
Internet Explorer
Waar veel designers een schurfthekel hebben aan Microsoft's veelgebruikte browser zijn ze op font-gebied prima bij de tijd: de hier besproken techniek werkt al vanaf IE4! Jammer genoeg doet Microsoft echter ook hier z'n eigen ding. Normaal gesproken worden lettertypes opgeslagen als TrueType-bestand (.ttf of .otf), Microsoft wil per sé een EOT-bestand (.eot) hebben. Gelukkig zijn er op het web verschillende tools beschikbaar die een TTF-file omzetten in een EOT-bestand. Kirsle's TTF2EOT converter is mijn favoriet.
Mozilla Firefox
Firefox is lekker simpel. Er wordt gebruik gemaakt van TTF- en OTF-bestanden. Bovendien worden dik- of schuingedrukte lettertypes afgedwongen, net als Photoshop (en Word) doet.
Safari
Net als Firefox maakt Safari gebruik van TTF- en OTF-files. Het verschil is dat Safari geen lettertypestijlen 'afdwingt'. Wanneer je een bepaalde tekst vet wil drukken heb je daar ook een speciaal (vet) lettertype voor nodig.
Google Chrome
Google Chrome wist tot voor kort niet goed wat het hiermee wilde. In eerste instantie was font-embedding (TTF en OTF) mogelijk, toen werd het om veiligheidsredenen uitgeschakeld, maar sinds versie 4 kunnen webdesigners weer van deze functionaliteiten gebruik maken. Daarnaast dwingt Chrome het gebruik van niet expliciet gespecificeerde lettervarianten af. Voor meer details, zie hier. Naast TTF- en OTF-lettertypes ondersteund Chrome ook SVG-bestanden (zie onder 'Opera').
Opera
Opera zegt dat de browser sinds versie 10 TTF- en OTF-lettertypes ondersteund. Misschien is het inmiddels beter, maar toen ik ermee bezig was (en versie 10 net op de markt was) werkte het niet. Echter, er bleek een andere manier te zijn. SVG-fonts (Scalable Vector Graphics) worden namelijk al langer ondersteund. Ook hiervoor moet je je bestanden omzetten. Een TTF2SVG converter in Batik helpt daarbij. Omdat het command-line is lijkt het ingewikkeld, in de praktijk valt het mee. Loop je toch vast, reageer even in dit topic!
CSS @font-face
Hierboven kon je al lezen welke techniek en welk bestandsformaat welke browser 'lust'. Maar daarmee ben je er nog niet: de lettertypes moeten ook nog door de browser worden ingelezen. Dat gaat met de @font-face-selector. Omdat elke browser een eigen variant van het lettertype nodig heeft lijkt het een ramp om één syntax te maken die elke browser tevreden stemt. Paul Irish is dat echter gelukt met zijn bulletproof @font-face syntax. Die ziet er zo uit:
- @font-face{
- font-family: "Cambria";
- src: url("/fonts/Cambria.eot");
- src: local("Cambria"), url("/fonts/Cambria.ttf") format("opentype"), url("/fonts/Cambria.svg#Cambria") format("svg");
- }
Allereerst geef je met de eigenschap font-family aan hoe het lettertype dat je gaat embedden heet. Die naam heb je in je verdere CSS ook nodig als je naar het lettertype verwijst.
De magie begint echter pas bij de src-eigenschap (van source of bron). In bovenstaande syntax zie je 'm twee keer staan. De eerste (regel 3) zorgt dat het IE-font (.EOT) wordt binnengehaald. In regel 4 worden de andere lettertypes ingeladen. Internet Explorer leest die regel niet vanwege format() en houdt dus vast aan de EOT-file. Omdat andere browsers niets met dat bestand kunnen, lezen zij wél door in regel 4. Daar wordt ze opgedragen om eerst op de PC van de gebruiker (local) te kijken of het font aanwezig is. Niet het geval? Dan wordt doorgelezen naar de volgende optie, het TrueType-bestand. Als daar ook niet mee kan worden omgegaan (Opera) wordt de derde keuze, een SVG-bestand, gebruikt.
Font-varianten
Zoals gezegd bestaan er (vaak) echter meer variëteiten van één font. Tenzij de browser deze varianten 'afdwingt' (Firefox, Chrome, IE) moeten deze stijlen dus apart worden meegenomen. Daarvoor kun je de eigenschap font-style aan de implementatie-CSS toevoegen. Hoewel ik er geen bron meer van kan achter halen meen ik me echter te herinneren dat Opera moeite heeft met twee lettertypes onder dezelfde naam, óók al verschilt de font-style. Neem voor het dik- of schuingedrukte font dus even een andere naam: Cambria Bold, bijvoorbeeld.
Overigens, zorg er wél voor dat je de font-style-eigenschap meeneemt. HTML-elementen die standaard dik of cursief worden weergegeven (zoals <em>) vertrouwen hierop. Je kunt voor die elementen uiteraard ook aparte CSS schrijven (zie onder), zodat de je font-style-eigenschap (in ieder geval in theorie) niet meer nodig hebt.
- em{
- font-family: "Cambria Italic";
- }
- strong{
- font-family: "Cambria Bold";
- }
Optimalisatie
Identiek aan het bijknippen van afbeeldingen om hun grootte (en dus de bandbreedte) te beperken kun je ook lettertypes 'bijknippen' of optimaliseren. Lettertypebestanden zijn namelijk al snel een paar honderd KB. Door karakters te verwijderen die je niet gaat gebruiken (en in een uitgebreide lettertypefamilie als Cambria of Calibri zijn dat er heeeel wat) kun je flink wat ruimte besparen. Het verwijderen van karakters kan met fontediting software en is een behoorlijk tijdrovend klusje. Een goed (hoewel niet gratis) programma hiervoor is HighLogic Font Creator.
Alternatieven
Naast deze CSS3-syntax zijn er alternatieven om webfonts te gebruiken. Een bekende daarvan is sIFR, Scalable Imman Flash Replacement. Daarbij wordt elk element met een 'vreemd' lettertype vervangen door een stuk Flash. Nadeel is dat het niet geschikt is voor grote lappen tekst, terwijl dat met deze techniek geen probleem is.
Verder lezen?
Dit artikel geeft een korte introductie tot font-embedding voor het web. Er is echter ontzettend veel over geschreven. Aanraders zijn deze wiki en een artikel van Jonathan Snook. De reeds genoemde website van Paul Irish geeft daarnaast een nadere toelichting op zijn CSS-syntax.
Dit Artikel
Dit artikel is geschreven door Bram, en mag niet gekopieerd of gepubliceerd worden zonder toestemming van de auteur.
.
