@font-face – designede skrifttyper

I mange år har vi webdesignere været enormt begrænset i anvendelsen af unikke skrifttyper. Nu er tiden blevet moden til at arbejde frit med vore kunders unikke skrifttyper og ønsker.Det har været nødvendigt at teste et begrænset sæt af skrifttyper i Windows, på Mac og i Linux for at garantere at hjemmesiden blev vist korrekt.

Frem til i dag har der været mange forsøg fra udviklere på at skabe et stabilt grundlag for os webdesignere så vores kreativitet kunne få frit spil. Teknologier som Cufon, SiFR, FLIR, og @font-face har alle repræsenteret forskellige fordele og ulemper og til trods for at der ikke er stadsfæstet nogen officiel standard på området endnu, har vi hos Divendo valgt at fokusere på @font-face alene.

@font-face er uden tvivl den simpleste metode til at embedde (indsætte) specialfonte og adskillge hjemmesider kommer i øjeblikket frem med forskellige licenser og gratisk downloads af fonte. Vi har valgt @font-face, da det er direkte understøttet i CSS3 – den nye CSS standard og mange internetbrowsere understøtter alle @font-face klasserne. Fordelen med @font-face er selvfølgelig den direkte understøttelse i CSS3, men ligeledes at resultet bliver så meget bedre. Jeg vil skrive lidt mere om de andre alternativer længere nede, samt vise ressourcer / links til download af fonte.

Ressourcer til download af @font-face skrifter

Der opstår flere og flere online ressourcer til download af fonts. Nedenfor viser vi nogle af vore favoritter.

Google Font API

Google’s Font API er en af de nemmeste løsninger til at indsætte special-fonte i dine designs. Ved at anvende API’et vælges en font fra Google’s Font Directory. Fra biblioteket vælges en font og du kan derfra indsætte koden i dit <HEAD> tag på dit site. Al @font-face tager Google sig af og du er kørende på et øjeblik. Det dårlige ved Googles Font Directory er at der p.t. ikke er mange fonte at vælge imellem og Google understøtter ikke SCG fonte, så mobil understøttelse er ikke supporteret.

TypeKit

TypeKit var en af de første til at offentliggøre en online @font-face service. Et samarbejde med producenterne har tilført et kæmpe udvalg af fonte og abonnementer hos Typekit starter fra $24.99 / år for 2 sites.
Besøg TypeKit

Typotheque

Typotheque tilbyder køb af alle deres fonte til brug på nettet. Det positive er køb via engangs-beløber uden behov for årlige gebyrer for en fast service. Køb, kopier CSS kode og du er igang.
Besøg Typotheque

Font Squirrel

Min absolutte favorit til søgning og download af gratis fonte. Du kan søge fonte, teste tekster og downloade fontene gratis til personlig eller kommerciel anvendelse. Der findes en selvstændig sektion til download af @font-face kits som er færdige sæt til indsættelse i designs.
Besøg Font Squirrel

FONTex

Har ikke personligt anvendt FONTex endnu, men fandt under skrivelse af denne artikel siden og synes den virker som en absolut værdig pendant til Font Squirrel og skal helt sikkert kigge siden igennem for fonte til vores næste design projekt.
Besøg FONTex

Alternative font embedding metoder

Der findes som beskrevet en del alternative forsøg på font-embeddings og jeg vil skrive lidt om fordelene og ulemberne herunder.

Cufón

Cufón var et af de senere alternativer til font embedding og et udemærket alternativ (til @font-face kom). Projektet er Open Source via MIT licens og fuld kildekode kan hentes fra GitHub.

Cufón projektet blev skabt for at være en værdig ‘modstander / alternativ’ til SiFR. Det kan være svært at få resultatet pænt nok og desværre er det de individuelle browsere som skal rendere / fortolke resultatet hvilket giver et lidt forskelligt resultat i f.eks. Internet Explorer og Firefox eller Safari. Desuden er Cufón sværere at sætte op.
Besøg Cufón

SiFR (Scalable Inline Font Replacement)

SiFR er i realiteten den tidligste metode til indsættelse af fonte. Omend at resultatet er identisk over alle browsere og system platforme, så er den Flash-baseret og således vil en del over den nærmeste tid højst sandsynligt vælge at udskifte SiFR med – ja, formentlig @font-face pga. CSS understøttelsen. iPhones, iPad’s og andre mobile enheder har ikke understøttelse for Flash og ned udviklingen af HTML5 og CSS3 som mere og mere integreres – får SiFR nok en fremtid med modgang i møde. Men vi takker mange gange for de fornuftige løsninger som I har hjulpet med gennem årene frem til nu.
Besøg SiFR

FLIR

FLIR eller ‘Facelift Image Replacement’ er et script som kan indsættes i CMS systemer, m.v. og som erstatter overskrifter eller det ønskede med billeder som indeholder teksterne. En fin teknik, men tiden er også hér løbet fra resultatet og ulemberne er mange – deriblandt forringet søgemaskine optimering og højere load tider på hjemmesider som anvender dette.
Besøg FLIR