Strunta i webbsäkra font-familjer och låt @font-face skapa typografisk magi
font-face

I förra inlägget skrev jag lite hastigt om webbsäkra font-familjer. Typsnitt som är lika för de flesta operativsystemen och som finns på både Linux, Mac och Windows.

Men vad gör du ifall just ditt typsnitt inte existerade i den listan. Och som grafisk designer kan du inte ha det på något annat vis än att använda just ditt specialdesignade typsnitt. Bilder är inget alternativ, så vad gör du då?

Med css definitionen @font-face är det möjligt. @font-face låter dig definiera en egen font-familj och låta besökaren ladda ner det aktuella typsnittet och sedan visa din hemsida precis som du vill ha den. Funktionen är egentligen en CSS2 definition, men då var det bara Internet Explorer som stödde den, och då endast med specialformatet .eot (vilket för övrigt fortfarande är det ända IE stödjer). Nu när CSS3 och HTML5 gör intåg stödjer alla stora webbläsare @font-face till en viss grad, och med lite special kodning och alternativa typsnitt att falla tillbaka på kan vi visa hemsidan precis som vi vill ha den utan att oroa oss för att gamla webbläsare och uråldriga användare inte ska kunna hänga med.

Bulletproof smily version av @font-face

Koden som rekommenderas att använda för @font-face och som framförallt är framarbetad av Paul Irish ser ut som följer:

1
2
3
4
5
6
@font-face {
  font-family: 'WpGuru Familjen';
  src: url('WpGuruFamiljen.eot?') format('eot'),
       url('WpGuruFamiljen.woff') format('woff'),
       url('WpGuruFamiljen.ttf') format('truetype');
}

Koden ovanför gör så att jag kan använda mig av font-familjen ‘WpGuru Familjen’ i min style.css, där konden ovan också för övrigt ska in. Anledning till att den är på så många rader är för att alla webbläsare ska förstå, framförallt IE. Genom koden ocan kan man lura de olika webbläsarna så att till och med ie6 kan förstå. Om du vill veta exakt varför läs gärna Paul Irish inlägg om saken

Första raden @font-face talar om att här börjar en definition om en ny font. Andra raden specificerar namnet på fonten. Det är detta namnet man ska skriva ifall man sedan vill använda fonten.

Tredje raden är till för Internet Explorer som bara förstår .eot filer, och detta är alltså platsen på hårddisken relativt till stylesheet filen där fint typsnittsfil ligger.

Rad 4-7 är till för alla andra webbläsare. Rad 4 säger att ifall besökaren redan har ett typsnitt installerat på datorn som heter samma sak som står mellan local, så ska man använda detta typsnitt, vilket kan vara bra, för att besökaren ska slippa ladda ner din fil, men ifall besökaren råkar ha fel typsnitt med samma namn installerat, så kommer alltsammans se fel ut, så därför testar man och ser ifall användaren har ett typsnitt som heter (smily), för att den alltid ska misslyckas. Varför då inte helt strunta i det, frågar du dig? För att IE inte förstår vad local betyder, och kommer att hoppa över den raden. Skulle man IE lasa vidare, skulle IE ladda ner även nästkommande typsnittsfiler trots att IE inte förstår sig på dessa typsnitt, vilket bara skapar massa jobbigheter. Så detta är den bästa lösningen (läs mer på Paul Irish sidan specificerad ovan).

Vidare på rad 5-7 sedan när IE är ur vägen, specificeras olika typer av din font, för olika typer av webbläsare. WOFF är ett litet och snabbt format som stödjs av FF3.6+, true-type stödjs av de flesta och är special designat för att visas bra på webben. Svg tillslut är xml format som södjs av ett fåtal webbläsare men framförallt av iPhone och iPad.

Tillslut på rad 8-10 tar vi bort några buggar i webkit läsare genom att specificera alla stil varianter till normala. Så får vi inga dumma kraschar på grund av detta. Läs gärna mer om detta här.

Förut var det The Bulletproof smily syntax som gällde, men skaparen till Font Squirrel har lyckats komma på en smart metod som ersätter den och genom de få raderna ovan lyckats göra så att till och med ie6 kan få special designade fonts. Genom att lägga till information om 3 stycken fonts, kan man erbjuda det bästa typsnittet för varje webbläsare. eot filen till Internet Explorer mindre än 9, woff filen till alla moderna webbläsare, och slutligen ttf-filen till Safari, Android, iOS.

Den här metoden heter ”The Fontspring @font-face syntax” och Font Spring har skrivit ett bra inlägg om precis vad som händer i syntaxen.

Generera dina typsnitt

-Men, tänker ni, så många filer av ett och samma typsnitt har inte jag!

Så hur får du tag i typsnitten i alla de där formaten som beskrevs ovan?

Lugn, som tur är finns det smidiga och bra verktyg på internet, där det bästa är skapat av Font Squirrel.

Här kan du ladda upp dina normala .ttf filer som du till exempel kan hitta i din dators font mapp eller lite varstans på internet. Och sedan ser generatorn till att skapa filerna du behöver. Tänk vad lätt det kan vara ibland.

Hur du sedan använder dina familjer

Ok, koden är redo, filerna är redo. Hur får du nu din text att formad som du vill ha den? Enkelt, precis som du skulle vilken annan font som helst.

p{

   font-family: WpGuru, 'WpGuru Familjen', verdana, helvetica, arial, sans-serif;

}

Nu kommer den att använda WpGuru fonten som allting går som det ska, och ifall den inte hittar typsnittet trots alla våra koder och filer (och under de få sekunder innan webbläsaren har hunnit ladda ner och installera typsnittet), så kommer den att falla tillbaka på verdana i första hand, helvetica i andra hand och så vidare.

Så nu kan du styla din hemsida precis så som du vill ha den, med de coolaste typsnitten du kan då tag i, få det att fungera i alla webbläsare och skulle det mot förmodan ändå gå åt pipan, så har du lösningen för det också.


En kommentar till 'Strunta i webbsäkra font-familjer och låt @font-face skapa typografisk magi' »»

  • Tack för bra artikel om fontface! Font squirrel är supernice för färdiga paket med fria typsnitt och CSS för fontface. Men lite letande krävs för att få paket med fungerande svenska tecken! Har lista med några testade.


Lämna en kommentar

XHTML: Du kan använda dessa taggar:
<a href="">, <em>, <strong>, <img src="">,
<pre lang="php">, <code>, <blockquote>