Har du lyst til å bruke hvilken font du vil på nett, uten å bekymre deg for om brukeren har den installert? Cufón er en glimrende, rask og forholdsvis enkel løsning, som lar deg bruke hvilken font du vil i din nettdesign.
Bakgrunn
Å implentere fonter som ikke er «websafe» på nett har alltid vært en liten nøtt for de fleste. Du må gjerne legge inn en font du har installert på maskinen din i font-family, men denne vil bare dukke opp hos de som har den installert. Standard fontutvalg er forskjellig på Windows, Mac og Linux, samt ulike versjoner og distrubusjoner av disse. Altså må du finne på noe annet lurt. Det vil si, noen har selvsagt gjort dette allerede, da.
En – egentlig – solid løsning er @font-face. Dessverre har ikke alle de mest populære nettleserne støtte for denne, så den dropper vi. Løsningen sIFR var ganske hot da den kom, eneste i sitt slag, som den var den gangen. Trenger jeg å si mer enn at den krever Flash? Nei, tenkte meg dét. Siste skrik, etter Cufón, er Google Font Directory, aka Google Webfonts. Uhyre lett implentering gjør den til det mest attraktive i dag, etter min mening, men utvalget er foreløpig litt for tynt at jeg omtaler den som et reelt alternativ til Cufón.
Hvordan ta i bruk Cufón
Så til saken. La oss komme i gang med Simo Kinnunens fantastiske Cufón.
- Last ned selve Cufón-filen (en JS-fil) herfra.
- Hvilken font vil du bruke? Finn denne i font-mappen på maskinen din og kopier den til skrivebordet eller en annen midlertidig plass.
- Gå til Cufón Generator. Her blar du igjennom og finner fram font-filen(e) du vil bruke.
- Under Include the following glyphs er det viktig at du ikke er lat og haker av All. Dette vil gi filen mer informasjon enn den trenger, og dermed gjøre den større og tyngre enn den trenger – og bør – være. Bestem selvsagt etter ditt bruk, og husk å legge inn støtte for ÆØÅ. Jeg velger å gjøre følgende:
Som du ser har jeg fylt inn æ ø å Æ Ø Å ò ó é i det nederste feltet. (Sånn, da kan du få lov til å kopiere det, i stedet for å skrive av bildet. Er jeg ikke raus?) - Under Security kan du velge å begrense tilgangen til filen på et eller flere spesifikke domener.
- Videre forstår du selv, for så å krysse av at du aksepterer vilkårene for Cufón og klikker Let’s do this!. Lagre filen et sted blant designfilene du husker – hører du?! ;-)
- Da er vi nesten framme i fonthimmelen. La oss bare ta en tur innom <head>. Her legger du til følgende:
<script type=»text/javascript» src=»js/cufon-yui.js»></script>
<script type=»text/javascript» src=»js/Comic_Sans_MS_400.font.js»></script>
<script type=»text/javascript»>
Cufon.replace(‘h1′);
</script>
Her velger du altså først filbanene for Cufón- og din font-fil. Deretter velger du i koden hva som skal få æren av å smykke seg i Comic Sans … i dette tilfellet. Som i eksempelet, kan du prøve ut h1 for å se om alt går knirkefritt, før du endrer til det du ønsker. - Utover fonten, som Cufón bestemmer, kan du tilpasse teksten din i CSS, på vanlig måte. For litt mer tricky ting som hover og annen styling, anbefaler jeg deg å lese gjennom Cufón-dokumentasjonen, som forklarer alt dette enda litt mer spesifikt enn jeg har gjort.
For- og bakdeler med Cufón
Pluss:
- Ordnes på to minutter (om du har gjort det før).
- Svært kjapp!
- Fungerer i så og si alle nettlesere.
- Krever ikke kompliserte språk;
- En dressert apekatt kan sette det opp.
Minus:
- Det er ikke mulig å markere tekst.
- Krever JavaScript.
- Bruker et lite sekund på å laste – det kunne alltids gått litt raskere.
- (Vær oppmerksom på at fonten du bruker er lisensiert for nett.)
Lykke til! Bare gi en lyd fra deg i kommentarfeltet om du ikke får det til. Jeg skal ikke kalle deg for en dressert apekatt.
Bare apekatt.
«En – egentlig – solid løsning er @font-face. Dessverre har ikke alle de mest populære nettleserne støtte for denne, så den dropper vi.»
Hvilke populære nettlesere sikter du til da? Jeg ser per i dag ingen grunn til lenger å støtte seg til hverken sIFR eller Cufón. Unngå Flash, unngå JavaScript, bruk standard font-formater tilpasset web og la gamle ikke-Explorer-brukere få andrevalget ditt. Riktignok må du gjøre fonten tilgjengelig i 2-3 formater, men verktøy finnes som automatiserer dette (eller tjenester som typekit & co om Javascript er greit å bruke).
Godt poeng, Frode.
Jeg mener det fortsatt ikke finnes en ultimat løsning for dette – alle har sine minus. Ja, Cufón har JS-minuset, men det synes jeg veier opp for at @font-face ikke støttes av IE. Selvsagt hater også jeg denne nettleseren, men det er fortsatt så mange som bruker den, at jeg velger ikke å bruke @font-face.
Det blir jo smak og behag, og ikke minst etter målgruppen du retter deg mot.
Jeg må egentlig si at det er like greit å bruke standardfonter. Det finnes jo nok av dem som er helt grei ut da.
Å gjør at ytelsen til siden kan bli litt dårligere er jo et svært minus, sånt liker ikke jeg.
Men poenget mitt Mattis var nettopp det at også Internet Explorer, tilbake til versjon 5.5, støtter @font-face. Du finner mye god informasjon her:
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
@Stein Ove: Å holde seg til standardfonter er på en måte mer trygt, ja. Faren ved Cufón og slikt, er jo at man lett kan ta inn fonter som ikke gjør seg på nett, eller er generelt fæle. Men det kan bli bra hvis man bruker det «kontrollert og riktig».
@Frode: Takk for lenken – fin lesning. Det stemmer forsåvidt ang. IE, men den takler det fremdeles ikke optimalt, i tillegg til at Firefox fikk det noe sent og det har vært kluss med det i flere av de store nettleserne. Grunnen til at jeg har sett bort i fra det er en blanding av dette, og konverteringsarbeidet.
Dog er det absolutt et alternativ som blir mer og mer aktuelt, og vi får håpe noe sånt kan bli en fullverdig løsning i framtiden.
Jeg leste innlegget, tenkte at jeg hadde mange og gode innvendinger. Men så ser jeg dere tar opp en etter en.
Jeg vil si, se an målgruppen. Unge nerder eller gamle pensjonister? Velg metode deretter.
Dessuten er dette med lisenser og opphavsrett i seg selv grunnen til at jeg allerede velger @font-face, og cluet ligger i å hente inn en ok fallback/font-stack om noe skulle skjære seg.
(I tillegg til at jeg HATER å ikke kunne kopiere tekst!)
Spennende å høre.
Børster litt støv av @font-face (for min del) nå, så ska’ me sjå.
Du kan tro jeg irriterer meg over det også, Mia – kanskje jeg skal gi @font-face en sjanse på bloggen. Hvis ingen av dere skal gå av med pensjon med det første … ;-)
@Mattis: Man må velge fonter med omhu for bra rendering i Explorer, ja. Men etterhvert som font-utviklere sørger for god hinting i sine fonter (som det allerede skjer mer og mer av), og Explorer forbedrer sin opptegningsmotor vil dette bli et ikke-problem. Angående konvertering til forskjellige formater er det heller ingen problem med FontSquirrel: http://www.fontsquirrel.com/fontface/generator
Men som Mia sier er det ikke alle nettsider som bør bruke @font-face (e.l.), og man må absolutt velge fornuftige fallback-fonter i tillegg. Jeg bruker dog heller standard teknologier som er skikkelig støttet av font-utviklere enn å bruke en noe «hackish» løsning som krever kompilering til et merkelig format (og som ikke støtter markering av tekst sist jeg sjekket).
Mitt største problem med @font-face er faktisk windows. Dvs hvor ulikt fontene rendrer i de forskjellige nettleserne.
Både Opera, Firefox, Chrome, Safari og IE har ganske store variasjoner. På win er min erfaring at Safari er verst og Opera best. Jeg aner ikke hvorfor, men jeg regner med at det er operativsystemet som er det egentlige problemet. og ikke nettleserne.
Skreik noen «font-rendring standard»? Ja takk!
Jeg kaster meg inn i dette med å si at sIFR og Cufon hører fortiden til og at @font-face er det eneste fornuftige alternativet som har en framtid. @font-face, i motsetning til andre løsninger gir deg større kontroll over typrografien fordi du kan ta tak i font-weight, word-spacing, font-variant, text-transform og letter-spacing osv.
Firefox 3.5+ , Safari 3.1+, Opera 10+ og Internet Explorer 4.0+ har alle støtte for @font-face, men det er fremdeles store problemer knyttet til lisensiering av fonter for web og formatene disse skal lages i. Alle nettleserne støtter .otf og .ttf men untakk av IE som kun støtter sitt eget proprietære .eot format.
Den beste løsningen jeg har funnet er fra typekit.com, og ser ut til å være noe font-husene er villige til å støtte. Typekit gir deg tilgang til en stor mengde komersielle fonter på lovlig vis som enkelt implementerer @font-face på korrekt vis for alle nettlesere som støtter det.
Når det gjelder hastighet med @font-face, sIFR og Cufon vil dette alltid bli treigere enn å bruke standard-fonter. Selv med @font-face må font-filen som skal brukes lastes over minst en gang inntill den er cachet, og font-filen kan ofte være 100-200kb avhengig av hvor mange snitt du ønsker å ha med.
Klaging på at ting ikke funker eller ser likt ut i alle nettlesere føles så gammeldags. Det at ting ser nogenlunde likt ut føler jeg er viktigere enn at ting er pixel perfect i alle nettlesere. OK, IE-brukere får ikke servert en custom-font med @font-face, men betyr det egentlig så mye?
Hvis man finner en replacement-font man kan bruke i de tilfellene der @font-face ikke er støttet, og serveren denne til brukeren, er det nesten bedre enn å måtte gå inn og tulle med JavaScript for å få loadet/tegnet fonten med canvas. Dog spørs jo dette på prosjektet; har man JavaScript-funksjonalitet inne der fra før, er det ikke sikkert det gjør noe å loade fonter med JS.
@mia: Font-rendering kommer aldri til å bli standard så lenge man har Mac og Microsoft som begge har utviklet sine egne standarder for font-rendering. ClearType og Apples sub-pixel rendering fungerer på vidt forskjellige måter, så det er vanskelig å gjøre noe med når man bruker TrueType-/OpenType-fonter. Opera har vel også sin egen renderer tror jeg.
Konklusjonen min er altså: Gi brukerne som har moderne, gode nettlesere noe ekstra sweetstuff som @font-face love, css3-ting som text-shadow, box-shadow, css3 transform og transitions. Brukerne som ikke bruker de nettleserne vil ikke vite forskjellen, fordi let’s face it: Det er bare vi som jobber med web som faktisk sjekker ut hvordan sidene ser ut i ulike nettlesere, mannen i gata vil ikke vite om forskjellene.
Akkurat det siste føler jeg er noe man bør fronte til kunder også, og for all del; ta ekstra betalt om de MÅ ha ting til å se likt ut, og gjerne ennå litt ekstra betalt for IE6-fiksing! :)
Hmm, spennende lesning, men jeg ser på listen over fordeler og ulemper (eller bakdeler som du kaller det). Svært kjapp er en fordel og bruker ett lite sekund på å laste er en ulempe, så la oss fjerne begge de. Fungerer i så og si alle nettlesere argumentet er jo det du bruker for å ikke bruke @font-face. Uansett hvor kjapt det er å ordne opp i det vil jeg da tro det er enklere å benytte eksisterende fonts gjennom @font-face. Google har jo til og med lagt ut noen gratis.
http://code.google.com/webfonts
Ja, noen nettlesere støtter ikke @font-face, men da handler det om en grasiøs fallback, ikke om å legge seg på ryggen etter å tilpasse alle nettlesere. Sidere trenger ikke se 100% like ut i, men de må se like bra ut i alle nettlesere. Om en bruker kommer med IE6 trenger du ikke levere 100% pixel perfeksjon.
Støtt standarder og ikke implementer noe som bare blir ett herk å vedlikeholde i fremtiden. Ikke for å snakke om mobil rendering.
Takk for alle innspill – dere har mye bra å komme med! :-)
Dette utartet seg litt mer til en font-render- og nettleserdebatt, men det er vel så interessant. Det å vurdere om man skal jobbe litt (eller mye) med å tilpasse en design til å fungere i alle nettlesere, eller konsekvent droppe støtte i f.eks. IE.
På én side har jeg valgt å være litt «brutal» ved å droppe å teste i IE6 lenger. Men fortsatt prøver jeg å få sidene mine like bra i IE (7 og 8). Som flere har nevnt kommer det jo også an på type side. F.eks. denne bloggen har jeg gjort noen justeringer for, så den går an å bruke i IE, mens detaljene for interesserte er å finne i de … ordentlige … nettleserne. Mye mulig at det er litt «egoistisk» å gjøre siden kompatibel med alle nettlesere, men noen ganger er det viktig for å beholde alle besøkene. Det er klart at det beste er å utvikle sider så de kun fungerer i gode nettlesere vi ønsker at folk skal bruke, men av og til velger nok mange bort å satse såpass.
Ang. det litt rotete jeg skrev om hastighet, Aleksander: Jeg mente egentlig at den går kjapt nok i massevis, men tannpirkere hadde ikke sagt nei til at det gikk enda litt kjappere. (Og ja, «bakdeler» var ment som en gimmick :-)
Kaster inn lenke til en annen bloggpost hvor jeg har nevnt dette med font-rendering på ulike maskiner og OS:
http://mattisaas.no/2010/01/fa-smoothe-fonter-pa-windows-som-pa-mac/
Jeg må innrømme at jeg driter totalt i IE6, så lenge det ikke er noe veldig spesielt (det hender – f.ex. hadde jeg en kunde her nå for litt siden som hadde 20-25% IE6-brukere – mareritt m.a.o.), og da tilpasser jeg helst bare så det funker akseptabelt i IE6, at utseendet er langt fra perfekt tror jeg IE6-brukere er veldig vant til.
Jeg bruker @font-face titt og ofte for tiden, og har ikke lagt merke til noen reelle problemer med det, hverken i IE 7 eller 8, som begge støtter dette fint bare man tilpasser litt et par linjer css, ingen grunn til knote med cufon.
@Jesper: (Takk for sist!) Enig i at man ikke bør etterstrebe klin lik rendering på pixelnivå, men det handler for min del mer om at fontene må ha kurant lesbarhet i de fleste nettlesere og dét er det ikke alle fonter som har med @font-face (da spesielt IE/Windows som sliter). Aner ikke om Cufón løser dette, men uansett ser jeg egentlig ikke noe poeng i å bruke workarounds for et nærmest ikke-eksisterende problem i dag. Man må uansett gjøre et godt valg av fonter, inkludert fallbacks.
Jeg foretrekker også enn så lenge å tilpasse fonter selv via f.eks. FontSquirrel, inntil Typekit/Google WebFonts og/eller font-utviklere leverer alt med skikkelig hinting, en av hovedårsakene til dårlig rendering i IE. (Hadde jeg tatt meg tid til å få opp en personlig side hadde jeg nok hoppet fint over .eot for IE.)
Forøvrig moro at det ble litt diskusjon og fokus på temaet, takk til Mattis for det!
@Jesper Jeg er helt enig i det du sier, men min erfaring er likevel ikke at ie/win er problemet. Alle nettlesere i Win viser store forskjeller. Jeg vil ikke legge skylden på en bestemt nettleser, jeg vil heller legge skylden på Win ;)
Bra Mattis, som legger grunnlaget for en god diskusjon rundt et interessant tema
Moro at det er mange, med god kunnskap, som melder seg på og kommer med gode innspill, som gjør dette til interessant lesning.
Selv foretrekker jeg fortsatt Cufón, men dette mest for at jeg da kan velg helt fritt med tanke på fonter. Om en kunde sitter på en sær profilfont som ønskes å implementeres, så vet jeg at dette ikke blir noe problem med Cufon. Med TypeKit er det stor mulighet for at denne fonten ikke er tilgjengelig, og med @font-face er det stor sannsynlighet for at mange ikke får sett den riktige fonten – så da er en jo like langt.
Men irriterer meg over at tekst satt med Cufón ikke er merkbar, så dette er sweet med TypeKit og @font-face. Test selv her: http://www.allverdig.no/downloads/fonttest/test.html
Sist jeg sjekket TypeKit, som sikkert er nærmere ett år siden, var det ikke så mange fonter å velge imellom. Dette utelukket TypeKit da som et seriøst alternativ (dessuten lastet fonten sykt tregt den gangen, noe det ikke gjør nå). Nå ser jeg også at det er over 500 fonter å velge mellom, så ingen tvil om at denne tjenesten også begynner å bli bedre.
@font-face har jeg ikke giddet å se så nøye på, siden den er så streng med tanke på hvilke fonttyper den bruker (spesielt problem for meg som mac bruker), samt ”dårlig” browser støtte – selv om Safari nå støtter trueType fonter. Men, har stor tro på at @font-face blir noe av det bedre med tiden.
Takk for bra info Tom-Marius. Det med font-weight, word-spacing, font-variant, text-transform og letter-spacing osv – ante jeg ikke var så fleksibelt med TypeKit og @font-face
Liker det eg leser, og har ikkje noko anna å tilføye enn at det i tillegg til Typekit kan du også benytte deg av nyoppstarta Webtype.
Sjølv nyttar eg Google sin skrifterstatter og er ganske nøgd med denne. Funker i alle nettlesarar (IE 6/7 er jo litt på hæla, men det er jo ikkje uvanleg) og på mobil. Går nok over til @font-face snart då eg arbeidar med eigne skrifter til bruk på nettet.
[...] [...]