Få länkade typsnitt att fungera i alla moderna webbläsare

Typografi är viktigt. Kanske det viktigaste medlet vi som formgivare har för att förmedla ett budskap. Det blir knappast mindre viktigt i digitalt förmedlad text, utan kanske till och med mer.

Tyvärr har den typografiska kontrollen över text på webben haft en hel del att önska. Vi har inte kunnat styra radfall, avstavningar, kerning eller ens vilket typsnitt som används. En mardröm för vilken formgivare som helst, som har resulterat i mer eller mindre dåliga tekniker för att öka den typografiska kontrollen. Man har satt text som bilder – både manuellt och automatiskt genererade, flash – både rena filmer men också automatiska bokstavsersättare som Sifr.

I och med Firefox 3.5 så har alla stora webbläsare stöd för länkade typsnitt på webben. Det här är nog det största som hänt formgivningen av webben sen CSS.

I dagsläget finns det drösvis med olika tysnittsformat (fonter), och ett typsnitt kan bestå av en eller flera fonter (filer på datorn).

De tre största renderingsmotorerna Trident (Internet Explorer), Gecko (Mozilla-läsarna) och Webkit (Safari och Chrome bland annat) har olika väl utbyggt stöd för diverse fontformat, vilket gör att man – även här – får hålla tungan rätt i mun.

Internet Explorer har bara stöd för Microsofts specialformat embedded opentype (EOT) som man själv måste generera från en truetype-font. Stödet har funnits sedan IE 4 men har inte riktigt använts i och med det krångliga programmet Weft som Microsoft tillhandahåller för det ändamålet. Det finns istället bättre tredjepartsverktyg som kommandoradsprogrammet Ttf2eot som är gratis, men kräver att man inte är helt obekant med terminalen.

Firefox och Safari har stöd för både truetype och opentype, och Safari har även stöd för SVG-fonter. Det här gör att man kan använda en CSS-regel för att länka en EOT till Internet Explorer, och en truetype eller opentype till Safari och Firefox. Eftersom Microsoft tillhandahåller något man kallar för ”conditional comments” så kan det göras helt utan några hack eller lappa-och-laga.

Det här innebär att en helt ny typografisk värld öppnar sig på webben. För typografi är precis lika viktigt på skärm som på papper.

Steg-för-steg-guide till länkade typsnitt i alla webbläsare

1. För att kunna köra Ttf2eot måste man först skapa en körbar fil från källkoden. Det kräver att du har installerat Apples utvecklingsverktyg Xcode. Det finns på installations-DVD:n som följde med datorn, eller så kan det hämtas gratis på Apples utvecklarsajt.

Skärmdump från developer.apple.com/mac

2. Ladda ner Ttf2eot och packa upp och lägg på skrivbordet. Du kommer nu ha en mapp med källkoden till programmet.

Innehållet i mappen.

3. Starta Terminal som ligger i Verktygsprogram i programmappen. Skriv cd mellanslag och drag-och-släpp mappen från skrivbordet till terminalfönstret. Tryck enter.

Terminalfönstret med sökvägen till mappen på skrivbordet (inklusive mappen).

4. Skriv make och tryck enter. Nu kommer den körbara filen att skapas i mappen. Den kommer att heta ttf2eot och få en svart ikon. Drag ut den filen på skrivbordet och släng källkoden och den nedladdade packade filen.

Den kompilerade filen när den dras ut på skrivbordet.

5. Skriv i terminalfönstret cd ~/Desktop och tryck enter. Drag-och-släpp ttf2eot till terminalfönstret så att sökvägen till filen skrivs ut.

Filen dras till terminalfönstret och sökvägen är utskriven.

6. Skriv < och ett mellanslag efter textraden i terminalfönstret. Drag-och-släpp truetype-fonten till terminalfönstret så att sökvägen till den skrivs ut. Slå mellanslag och skriv > mellanslag.

Hela kommandot i terminalen är utskrivet. Både ttf2eot och fonten syns på skrivbordet.

7. I mitt exempel använder jag typsnittet Deftone Stylus som är ett gratistypsnitt från Myfonts. Namnge din nya eot-font genom att skriva deftone_stylus.eot (eller något annat namn) i terminalfönstret. Avsluta med att trycka enter. Din nya eot-font ska nu skapas på skivbordet.

Samma som förra bilden, men även eot-filen syns på skrivbordet.

8. Kopiera de två fonterna till ett lämpligt ställe i din sajtmapp. Jag lägger dem i global/fonts/ i min.

Bild på kopiering till sajtmappen.

9. Öppna din CSS-fil och börja med att lägga till länken till truetype-fonten. Själva fonten heter deftone_stylus, men som typsnittsnamn anger jag i koden Deftone Stylus. Det spelar ingen roll vad man döper typsnittet till, men det är det namn man anger som är det som man ska använda i resten av CSS-dokumentet.

Bild på själva koden i CSS:en.

10. Eftersom vi har två olika fonter, en för IE och en för övriga, så måste vi villkora eot-fonten till IE och bara dit. Till vår hjälp har vi då något som Microsoft kallar ”conditional comments” som gör att allt inom dem läses av IE, men inte av någon annan läsare. Det här är helt korrekt kod och validerar. Den här koden måste ligga sist i listan av @font-face eftersom webbläsarna läser uppifrån och ner. Vi vill alltså att IE ska få den här regeln efter att alla andra som den inte kan hantera har applicerats.

Koden med conditional comments tillagd.

11. För att sedan använda det länkade typsnittet så får man ange det i regeln för den tagg eller det element man vill applicera det på. I det här exemplet är det endast <h1> som får ett speciellt rubriktypsnitt.

Koden inklusive CSS för <h1>.

12. Voilà! Ett länkat typsnitt applicerat på rubriken och som fungerar i samtliga webbläsare.

Skärmdump på webbsidan.

13. Som brödtext använder jag ett annat gratistypsnitt som heter Genium och som finns i flera skärningar. Här anger jag det två gånger, en för normal, och en för kursiv. Observera att font-family är angiven till samma, men att jag även lagt till font-style när jag länkar in den kursiva skärningen (detta fungerar inte i IE).

Skärmdump på koden för all typografi.

14. För att göra en layout där det länkade typsnittet ingår, och där vi även drar nytta av några fler effekter för typografin så har jag här ställt upp en layout med en rubrik och två spalter text.

Sidan utan något mer än grundlayouten gjord.

15. I uppmärkningen av texten så har jag markerat vissa fraser med <em>som är ett teckenformat, och därför har statusen inline i HTML. Den kan sedan layoutas på valfritt sätt, och här har jag angivit att den ska vara röd och satt i kursiv. Genom det så används den länkade fonten för den kusiva skärningen av Genium.

Skärmdump på webbsidan.

16. Eftersom vi bara använder <p> och <h1> så är det bara dem som vi anger i CSS:en också. Jag lägger en svag skugga bakom rubriken, och sätter en anfang i kursiv och lila med hjälp av pseudo-klasser i CSS. En bakomliggande tonplatta med rundade hörn, och layouten är klar.

Skärmdump på det färdiga resultatet.

Hoppa högst upp på sidan