@font-face är en funktion som låter dig använda egna fonts på din sajt. Du skapar en stil i din CSS-fil som innehåller typsnittet du vill använda och en länk till det som webbläsaren kan ladda ner för att sedan använda.

@font-face {
	font-family: Delicious;
	src: url('fonts/Delicious-Roman.otf');
}

Det du har gjort nu är att lägga till en font som du döpt till Delicious som du sedan kan välja till i en font-family.

h1 { font-family: Delicious, arial; }

Webbläsare som stödjer @font-face

I nuläget klarar IE 4+, Netscape 4+ och Safari 3.1+ @font-face. Mozilla planerar att Firefox 3.1 ska stödja det och även i Opera 10 kommer stödet finnas.

Problemet med @font-face

Det finns en stor tvist runt @font-face. Många är väldigt kritiska till att göra det till en standard då du enkelt kommer kunna ladda ner fonten genom att kolla dennes url i CSS-filen. Detta gör att designerns som skapar och säljer fonts kommer att råka ut för kopiering och att mängder av folk kommer kunna komma åt deras produkt utan att betala för sig. Detta är omöjligt så länge man endast visar fonten i en bild.

Mer läsning om @font-face

Vill du läsa mer om tvisten eller om hur @font-face fungerar? Då kan du gå in på A List Aparts artikel CSS @ Ten: The Next Big Thing eller vad Chris Coyer har att säga om saken på css-tricks.