Desenvolvedores Web e Web Designers normalmente lidam com o fato de não poder usar qualquer tipo de fonte em seus layouts, já que não há a garantia que a fonte esteja instalada no computador que acessa o site, o que é necessário para sua renderização (ou seu usuário verá aquele texto lindo em Arial ou Verdana).

Ok, existem alguns truques para saber isso, mas nada saudáveis para a aplicação e muito menos recomendáveis.

A solução inevitável é produzir o texto com a fonte não padrão como uma imagem. Uma saída efetiva, mas não viável. Há porém uma solução desde o nascimento do CSS 2.0, mas que pouco vi ser utilizada.

Com a tag font-face, você pode declarar uma nova fonte que pode ser utilizado no seu CSS, e também, qual o arquivo de fonte respectivo. Por exemplo, o código abaixo declara a fonte Rugged Ride e aponta para um endereço do servidor onde ela está intalada:

@font-face {
    font-family: "Rugged Ride";
    src: url("http://www.tomasvasquez.com.br/fonts/Rugged Ride.ttf") format("truetype");
}

Depois dessa declaração, é possível fazer o seguinte:

<h1 style="font-family: 'Rugged Ride'">Texto com a Fonte Rugged Ride</h1>

Abaixo segue o HTML respectivo:

Texto com a Fonte Rugged Ride

Como é uma fonte pouco comum, existe uma grande chance de não tê-la instalada em seu computador, mas ela aparece corretamente. Lembrando que seu navegador precisa ter suporte a CSS 2.0, ou essa técnica não funcionará.

Claro que nem tudo são vantagens. Na primeira vez que o usuário acessar o site, ele vai precisar fazer o download da fonte. A depender de seu tamanho, o texto pode aparecer sem fonte até que ela seja baixada totalmente.

Agora é aproveitar essa vantagem de desenhar seus sites!

Abraços!