Typeface.js – Embedda fonter på dina webbsidor

23 Dec 2008 Övrigt

Ett av de största begräsningarna i webbläsare sedan dag ett har varit typsnitt. Man har varit begränsad till ett mindre antal fonter som fungerar i samliga webbläsare. Man kan ju tycka att det vid det här laget borde finnas metoder för att embedda fonter i webbsidor men så är icke fallet. Det finns olika typer av work arounds till detta problem. Den vanligaste är att använda Flash för att rendera fonter i rubriker genom plugins som t.ex. WordPress Flash Titles. Ett annat alternativ är att använda serverside script som genererar GIF-bilder för rubriker. Jag förespråkar den senare då den belastar klienten minst men det kan vara lite bökigt att uppnå. Flash är betydlig enklare men båda har sina nackdelar. Framför allt är väl problemet Google-optimering. Texter som är genererade av flash är svåra att indexera och även om man lyckas är det långt ifrån optimala lösningar som luktar lite för mycket fulhack.

Just där för är Typface.js ett av de intressantaste kodbiblioteken som släppts på mycket länge. Det använder sig av Canvas-klasserna för att rita ut pixelgrafik genom Javascript. Detta fungerar numera i de flesta webbläsare. Och genom att först konvertera TrueType-fonter till kurvor i en Javascript-fil kan man rita upp vilka fonter som helst i canvasytor. Detta görs som vanligt genom CSS och sedan körs bara ett script som byter ut alla element med klassen: typeface-js. Man CSS-style’ar bara html-koden som vanligt och sedan lägger man in en script-fil och font-scriptfil och sätter helt enkelt bara font-family enligt nedan.
 

<script type="text/javascript" src="typeface-0.11.js"></script>
<script type="text/javascript" src="helvetica_regular.typeface.js"></script>
<div class="myclass typeface-js" style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

Det enda kruxet med det här tillvägagångssättet är hur man konverterar TrueType-fonter till Javascript-kurvor. På Typeface-sidan finns ett verktyg för att göra just detta men de allra flesta kommersiella fonter är kodade med ett attribut som säger att de just inte får embeddas. Jag är inte säker på juridiken här men OM man faktiskt har köpt fonten kan jag tycka att man borde få embedda den på webbsidor. Så för att ändå konvertera fonten kan du ladda ned programmet Font Creator från High Logic. Genom att öppna fonten i det programmet kan du gå in i menyn på: Format -> Settings ->General -> Font Embedding och där klicka bort alla boxar. Sedan sparar du ned fonten och laddar upp den igen på Typeface-sidan. Då kan du konvertera fonten och lägga in den på din sida. 

Exempel: