@font-face
Traditionellt har användandet av olika typsnitt på webbsidor varit begränsat till de typsnitt som användaren har installerade på sin dator. Det är det som är anledningen till att man behöver göra CSS-regler med fallbacks, som till exempel font-family: Georgia, "Times New Roman", serif, där "serif" betyder att webbläsaren, om inte i första hand Georgia, i andra hand Times New Roman finns installerat, ska använda valfritt typsnitt med seriffer.
Alternativet när det gäller stora rubriker, har varit att göra texten som en bild och infoga den med en <img>-tagg.
Utöver dessa metoder kan man idag skicka med typsnittsfiler med sin CSS genom @-regeln @font-face. Standarden för detta är inte helt fixerad ännu, men det fungerar i alla stora webbläsare, om än med vissa variationer.
@font-face i en CSS
För att bädda in en typsnittsfil ("font") i en CSS använder du följande syntax:
@font-face {
font-family: Gotham;
src: url(gotham.woff)
}
font-family ovan är det namn du väljer att ge ditt medskickade typsnitt, det kan vara vad som helst, men jag rekommenderar att det är någon variation på typsnittets namn. Det är detta namn du senare kommer att använda för att använda typsnittet med det vanliga font-family i dina vanliga CSS-regler.
Egenskapen src är naturligtvis adressen till din typsnittsfil, som ju måste ligga åtkomlig för CSS-en.
Utöver dessa två nödvändiga egenskaperna finns det några till:
font-weight- Bestämmer typsnittets vikt, alltså hur feta bokstäverna är
font-style- Talar om vad det är för variant av typsnittet (normal, kursiv eller lutad)
font-stretch- Talar om hur breda bokstäverna är, också en möjlig variation i ett typsnitt
unicode-range- Bestämmer om det finns en begränsad uppsättning tecken i typsnittsfilen
Dessa är inte nödvändiga, det som krävs för att det ska fungera är font-family och src.
Problem med @font-face
Ett problem med @font-face är att webbläsarna kan vilja ha olika filformat på webbfonterna. Dessa kan vara i .ttf-format, .woff, .svg eller .eot. Idag kan de flesta använda .woff vilket gör det till ett hyfsat säkert filformat, men för säkerhets skull kan det vara en bra idé att lägga till typsnittsfilerna i flera olika format. En förklaring och en metod att vara säker finns på css-tricks.com. Notera att du måste lägga till "format" när du har flera alternativa typsnittsfiler.
Ett annat problem är att dina typsnittsfiler på datorn oftast inte är i till exempel .woff-format utan måste konverteras. Det finns dock tjänster på nätet som kan hjälpa till med detta, till exempel Font Converter. Ett annat sätt är att installera ett program på din dator som gör detta, det finns flera. Jag använder till exempel FontForge, även om det kanske inte är världens mest lättanvända program.
Nättjänster
Om man inte vill göra det själv finns det också webbtjänster som gör @font-face åt dig, genom att ge dig en adress till en extern CSS, antingen genom en vanlig CSS-länk, eller med hjälp av en liten snutt JavaScript. Det kan se mystiskt ut, men det hela går ut på att någon annan gör @font-face åt dig.
Populära tjänster är till exempel;
En del är gratis, en del kostar pengar. Detta är ingen komplett lista, det finns betydligt fler tjänster.Du kan läsa mer om @font-face hos W3C eller W3Schools om du vill.