A propriedade @font-face do CSS3 - Mais fontes diferentes para seu site

Em alguns posts anteriores, eu apresentei 2 alternativas para inserirmos fontes diferentes das de sistema (verdana, arial, tahoma da vida...) em nossos sites ou blogs:

Método utilizando o Google Font API

Método utilizando o Cufón

Agora apresento a vocês a terceira e última (pelo menos por enquanto) dica da série, a propriedade @font-face do CSS3!

Como funciona?

É bem simples, digamos que você sobe uma fonte desejada para seu servidor, vamos usar como exemplo a "futura", você simplesmente diz o caminho em que a fonte se encontra e aplica em seus textos! Funciona no firefox, IE7 e IE8 (dane-se o IE6)... Para uma lista completa de navegadores que suportam esta propriedade, clique aqui.

Comoquefais?

Veja o CSS abaixo:

@font-face
{font-family: "Futura"; /* insira o nome de sua fonte */
src: url("http://www.seusite.com.br/futura.eot");/* insira o caminho absoluto, este eot serve para funcionar no IE */
src: url("http://www.seusite.com.br/futura.ttf"); /* insira o caminho absoluto */
}

Prontinho, agora quando você desejar que algum texto tenha a fonte futura que você já linkou via @font-face, basta colocar na propriedade do font-family, exemplo:

h1 {font-family: "futura", arial, verdana;}

Com isso, todos os elementos H1 do seu site ficarão com a fonte futura

"Certo, mas você falou lá em cima, que para funcionar no IE eu preciso utilizar uma fonte .eot, onde eu acho isso aí?"

Simples, você não precisa achar, você pode converter uma fonte ttf para eot, utilizando alguns destes sites abaixo:

http://ttf2eot.sebastiankippe.com/
http://www.kirsle.net/wizards/ttf2eot.cgi

É isso aí pessoal, esta é meio que uma solução definitiva para este assunto, espero que gostem, e que seja útil!