Como usar os meus próprios tipos de letra nas minhas páginas

[D]e certeza que já mui­ta gente per­gun­tou como uti­lizar os seus próprios tipos de letra nas suas pági­nas Web. Por muitos anos, estive­mos lim­i­ta­dos aos tipos de letra insta­l­a­dos no com­puta­dor de quem a visu­al­iza­va, mas com o aparec­i­men­to do CSS3, isto já é possível.

Para con­seguir isto, bas­ta pos­suir um brows­er que suporte CSS3 (todas as ver­sões mod­er­nas exis­tentes suportam).

Depois, bas­ta declarar num ficheiro CSS o seguinte:
[css]@font-face {
font-fam­i­ly: Jura;
font-weight: bold;
font-style: nor­mal;
src: url(/ri/wp-content/fonts/Jura-Bold.ttf);
}

@font-face {
font-fam­i­ly: Jura;
font-weight: nor­mal;
font-style: nor­mal;
src: url(/ri/wp-content/fonts/Jura-Regular.ttf);
}

@font-face {
font-fam­i­ly: Jura;
font-weight: bold;
font-style: ital­ic;
src: url(/ri/wp-content/fonts/Jura-BoldItalic.ttf);
}

@font-face {
font-fam­i­ly: Jura;
font-weight: nor­mal;
font-style: ital­ic;
src: url(/ri/wp-content/fonts/Jura-Italic.ttf);
}[/css]
Dos browsers recentes, ape­nas o Inter­net Explor­er não supor­ta ficheiros True­Type (TTF) e Open­Type (OTF) direc­ta­mente (será para admi­rar?). Para este, é pre­ciso fornecer ficheiro Embed­ded Open­Type (EOT). Exis­tem con­ver­sores disponíveis para Win­dows, Unix (tam­bém fun­ciona em Mac OS X).

Depois das declar­ações aci­ma, bas­ta uti­lizar tipo de letra como qual­quer out­ro, numa declar­ação de esti­lo, por exem­p­lo:
[css]h1 {
font-fam­i­ly: Jura;
font-size: 18pt;
font-weight: bold;
font-style: ital­ic;
}[/css]
Este blog uti­liza esta mes­ma téc­ni­ca para o tipo de letra que, se não estiv­er a usar Inter­net Explor­er, está a ver. O tipo de letra Jura pode ser descar­rega­do aqui.