Brug alternative skrifttyper online med Cufon

25. november 2011 af    Kommentarer Ingen kommentarer   Kategori Udgivet i Design

Cufón logoBrowsere kan, som standard, kun fremvise skrifttyper som allerede er installeret på den pågældende computer der besøger en webside. Dvs. skrifttyper, der præinstalleres med f.eks. Microsoft Windows og Mac OS, eller som installeres af brugeren selv efterfølgende. Dette kan være problematisk for både brugere og designere, da brugere til tider oplever en websides indhold anderledes end forventet og for designere som gerne vil lave unikke webdesigns der ikke begrænses af gængse skrifttyper. For at omgå dette blev Cufón i sin tid udviklet. Cufón er et stykke JavaScript, som muliggør anvendelse af skrifttyper på websider der f.eks. ikke er præinstalleret på den besøgendes computer.

Man kan måske undre sig over hvordan Cufón gør dette muligt, og det kræver da også en smule arbejde at sætte op. Først og fremmest har man brug for en font samt den JavaScript kode som kan downloades fra Cufón og indsættes på websiden. Fonten skal uploades til en online font generator hos Cufón. Har man brug for fede og/eller kursive skrifttyper skal disse varianter også uploades. Herefter har man en lang række muligheder for tilpasning, hvilket kan se lidt overskueligt ud når man scroller nedad på websiden ved første besøg. Det er dog forholdsvist ligetil når man først kommer igang. Et godt tip vil være at vælge så få funktioner som muligt for at gøre JavaScript koden så minimal som muligt og derved afhjælpe loadtid. Har man brug for de danske bogstaver som ikke optræder i internationale alfabeter, skal disse også tilføjes separat. Både store samt små af slagsen bør indsættes for at undgå evt. problemer.

Cufón understøttes af alle moderne browsere i nyere versioner, det vil dog ikke skade af foretage et par tests for at sikre sig at ens konverterede skrifttype nu også virker som den skal. Cufón anvendes bl.a. på mortenredder.dk i overskrifter.

Skriv kommentar

XHTML Du kan bruge disse tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Top ↑