Bloggen

Cufón fonter

 

Cufón blir stadig mer populært i design av nettsider. Cufón er en løsning basert på JavaScript, og krever ingen Flash eller bilder. Med Cufón kan man bruke nærmest hvilken som helst font i designprosessen. Problemet oppstår hvis javascript er slått av i nettleseren, da vil standardfonten vises. Cufón er raskt og enkelt å sette opp, består kun av to filer som må plasseres på serveren (avhengig av hvor mange fonter du ønsker å bruke i designet) og to blokker med kode som legges i malfilene som utgjør nettsiden.

Første steg i prosessen er å generere fonten du ønsker å bruke i prosjektet. Hvis du har fonten på din lokale maskin, kan du laste denne opp og generer Cufón fonten her,  eller du kan ta en titt på cufonfonts.com , en stor katalog med fonter å ta utgangspunkt i.

Man kan inkludere mange forskjellige tegnsett når man konverterer fonten, så selv om fonten i utgangspunktet kanskje ikke støtter æ, ø eller å, har man ofte mulighet til å få generert dem allikevel.

Deretter laster du opp filen du genererte + cufon-yui.js (som du laster ned fra www.cufon.shoqolate.com/generate/) til en mappe på serveren.

Så legger du denne koden imellom <head> </head>
<script src=»cufon-yui.js» type=»text/javascript»></script> <script src=»dinfont.font.js» type=»text/javascript»></script> <script type=»text/javascript»> Cufon.replace(‘h1,h2,h3’);  </script>

Til slutt skal denne koden inn i bunnen av siden, før siste </body> tag, også før andre script, f.eks Google Analytics:
<script type=»text/javascript»> Cufon.now(); </script>

Cufón støttes i disse nettleserne:
Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (fra Cufon 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ fra Cufon 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (delvis)

Se hvordan vi har tatt i bruk Cufón fonter på sykkelsport.no. Her har vi erstattet h1, h2 og h3 heading html tags med en font som heter Yanone Kaffeesatz. Besøk Sykkelsport.no og legg merke til fanene i toppen av siden, boksene på forsiden og i venstre side, for å nevne noen steder hvor standard fonten er byttet ut.

Ta gjerne kontakt om du ønsker hjelp med implementering av Cufón i din webløsning.

Andre løsninger er Google Webfonts (kan ikke generere egne fonter) og Font Squirrel.

LiveZilla Live Help