Typografera din webbdesign med font-face

Egentligen förstår jag inte varför inte @font-face används mer än vad det gör, cirka 75,41% av besökarna (siffror ska tas med en nypa salt som vanligt) stödjer inbäddade typsnitt på ett sätt eller ett annat. Internet Explorer (kors i taket) har faktiskt haft stöd sedan version 4, om än på ett annat sätt, vilket är ganska imponerande.

@font-face med typsnittet GrauBlauWeb

Nåväl, tänkte gå igenom lite snabbt hur du kan lösa snygga fonts för större delen av dina besökare, men även med typografisk fallback för de som inte har stöd för tekniken.

För det första så är det en stor skillnad vi måste reda ut, Internet Explorer stödjer enbart @font-face via sitt egna format .eot (Embeded Open Type) och inte .otf, vilket är det öppna typsnittsformatet, som resten av webbläsarna. Microsoft har därför lagt ut ett uråldrigt verktyg på 20MB som kan konvertera .ttf till oet. Detta känns krångligt eftersom det finns smartare vägar via onlineverktyg.

Verktygen som vi ska användas är först: Online font converter vilket konverterar typsnittet till .ttf, sedan ttf2eot vilket tar hand om den sista konverteringen till .eot. När .eot-filen är redo på din dator så är också du redo att implementera CSSen som krävs för att få det hela att fungera.

@font-face {
    font-family: 'namn';
    src: url('din/katalog/namn.eot');
    src: url('din/katalog/namn.eot?#iefix') format('embedded-opentype'),
         url('din/katalog/namn.woff') format('woff'),
         url('din/katalog/namn.ttf') format('truetype'),
         url('din/katalog/namn.svg#namn') format('svg');
    font-weight: normal;
    font-style: normal;
}

Byt ut “namn” till det du tycker att typsnittet ska heta i CSS-filen, helst och mest logiskt så döper man nog det till typsnittets namn.

.head { font-family: namn, Arial, sans-serif; }

Ovanstående kod är ganska simpel, namn är det namnet du har gett ditt typsnitt, Arial står för din fallback, som kan bytas ut till ett webbsäkert typsnitt som ser ut som det nya typsnittet. En fallback är att rekommendera för att fånga upp de sista 25% av besökarna som inte har stöd för tekniken.

Hoppas du har förstått grunderna i konceptet, det finns mer att läsa på css3.info och w3.org annars.