Egna typsnitt på webben.

Posted by Edvin Brobeck at 08:55

Inledning.

Om du jobbar med webdesign så har du antagligen redan märkt att man är begränsad till att använda de standardtypsnitt som är webbsäkra. Till de mest använda hör: Arial, Verdana, Trebuchet MS, Times New Roman.

Bakgrunden till detta är helt enkelt att man vill att en webbsida inte skall vara beroende på vilka typsnitt besökaren har installerade på sin egen dator.

Detta hade väl varit ett okej argument för några år sedan, när varje kilobyte fortfarande var viktig för att man inte skulle behöva vänta för länge medans sidan laddade. Idag ser dock verkligheten lite annorlunda ut. Med snabbare internetuppkopplingar, och nyare webbläsare kommer nyare lösningar på problemet.

Metoder

Flera metoder och alternativ finns tillgängliga redan idag, varav vissa är mer lättimplenterade än andra och andra bättre bakåtkompatibla.

Några av de alternativ som finns är Cufon, SIFR, FLIR, typeface.js, CSS3.

Cufon – vårt val.

Idag kommer vi att gå igenom Cufon, vilket är vårat favoritalternativ av alla de olika som vi har testat.
Vi kommer att gå igenom hur man konverterar ett typsnitt, samt hur du implementerar det på din egen sida!

Lets get to it!

Steg 1.  Konvertera ditt typsnitt.

Vi börjar med att välja ut vilket typsnitt vi vill använda. Därefter så går vi till

http://cufon.shoqolate.com/

Om du vill ha svenska tecken så är det bra om du fyller i dessa här, observera att typsnittet måste innehålla dessa tecken för att det skall funka (såklart!)

Implementering

Nu har vi en .js fil som innehåller vårat typsnitt. Då är det dags att lägga till denna på din websida och lägga till den kod som behövs för att sidan skall fungera.

1. Ladda även ner cufon-yui.js ifrån cufons hemsida.
2. Ladda upp filerna till servern och lägg dem i en mapp som heter ”js”

Öppna den fil som innehåller sidhuvudet för din webbsida (i wordpress så är detta header.php).
Tänk på att du måste inkludera dessa filer på alla sidor där du vill använa ditt egna typsnitt!

Kopiera följande två rader och lägg dem någonstans imellan < HEAD > taggarna

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/helvetica-neue_500.js" type="text/javascript"></script>

När detta är gjort så är det dags att välja vilka element vi vill skall bytas ut till ditt typsnitt.

Detta görs med följande kodsnutt – Den byter ut alla Rubriker till ditt typsnitt

<script type="text/javascript">
Cufon.replace('h1,h2,h3,h4', { fontFamily: 'ditt-typsnitts-namn' });
</script>

Nu är det hela klart! OM du har lyckats med alla steg så bör du ha något som ser ut som bilden nedan

Visa demo

Andra artiklar med liknande innehåll:

En ny jQuery-slider: Nivo

Äntligen – En riktig Slider Länge har vi  på Bombardier Studio har letat efter ett riktigt bra slider-plugin till jQuery, [...]

Snabbguide till CSS3

Vi  som jobbar med webb står inför en mycket spännande framtid. Utanför dörren står CSS3 och väntar på att släppas [...]

Fler domäner – en WP installation

För att förklara användningsområden av detta lilla enkla wordpress-hack så tänker vi oss att vi driver en verksamhet som säljer [...]