Usando Fontes no Template

Introdução

Hoje ensinarei a usar fontes de uma boa maneira em seus templates, ou postagens. Nesta exata postagem, uso a fonte Verdana. Vocês só conseguem visualizá-la porque ela está instalada em seu computador. Era com esse CSS que funcionavam as fontes das páginas de internet até pouco tempo:

#exemplo {
font: 80% Verdana, Comic Sans MS, sans-serif;
}

Preste atenção nas partes em negrito: no exemplo é usada a fonte Verdana. Se ela não estiver instalada no computador, é usada a Comic Sans MS. E se essa não estiver disponível, é mostrada a Sans-Serif. O problema disso? Era criada uma má experiência de usuário, pois várias fontes poderiam não estar instaladas, assim o usuário não veria sua página exatamente como você queria. Alguns designers também queriam usar fontes pouco conhecidas e inusitadas em seus layouts, que seria muito difícil de estarem no computador dos usuários.



Usando qualquer fonte que você queira: CSS3

Há pouco tempo, foi criada uma solução com a 3ª versão do CSS. Agora você pode usar qualquer fonte que queira, elas estarão na internet. É quase como colocar uma imagem ou um arquivo flash em uma postagem ou template. A seguir vemos um exemplo de como a nova técnica é usada:

@font-face {

font-family: Exemplo;

src: url('http://exemplo.com/fonte.ttf'),

url('http://exemplo.com/fonte.eot');

}

Você precisará deste snippet de CSS para usar uma fonte da internet. Uma diferença ao método antigo é que você "registra" uma fonte no template, que depois pode ser adicionada a quantos elementos você quiser.

Em verde, começamos o CSS com @font-face: isso nunca deve ser mudado. Em azul, damos um nome à fonte, nesse caso dei o nome de exemplo. Em laranja, adicionamos no lugar do "http://exemplo.com/fonte.ttf" o link da sua fonte na internet. Este link é compatível com todos os navegadores populares, menos o Internet Explorer 9. Em vermelho, temos o URL "http://exemplo.com/fonte.eot". Somente fontes no formato EOT funcionarão no Internet Explorer 9, portanto é importante que você tenha 2 formatos da fonte.

Convertendo fontes

Como escrevi previamente, é importante que você tenha a fonte no formato EOT e TTF. Provavelmente você já terá a fonte em formato TTF, pois ele é o mais usada e o padrão da maioria dos sistemas operacionais populares. Para conseguirmos a fonte no formato EOT vamos usar uma ferramenta prática: um conversor online.

É bem fácil de usar. Clique aqui para acessá-lo. Selecione o arquivo TTF da sua fonte e depois clique em "Convert TTF to EOT!". Depois disso, o conversor te dará o link de download da sua fonte em formato EOT. Baixe a fonte EOT para o seu computador.

Hospedando fontes

Agora que você já tem os dois arquivos salvos no seu computador, você precisa colocá-los na internet, há muitos jeitos de fazer isso. Muitos designers usam o Webs para hospedar seus arquivos e ele serve muito bem para hospedar suas fontes. Neste tutorial usarei o Dropbox, pois acho ele mais fácil e conveniente de usar.

No meu Dropbox, fiz upload dos dois arquivos, TTF e EOT, na minha pasta pública. Logo depois, copiei os links deles. No meu caso, estou usando a fonte Lobster Two e os links ficaram assim:

http://dl.dropbox.com/u/34805773/LobsterTwo.ttf
http://dl.dropbox.com/u/34805773/LobsterTwo.eot

Lembre-se que os links precisam ser diretos aos arquivos, ou seja, eles terminarão com .ttf e .eot. Compartilhadores de arquivos, como o 4shared e o Mediafire não funcionam.

Aplicando no template

Agora você usará o código no template, com o primeiro código da postagem:

@font-face {

font-family: Nome da Fonte;

src: url('http://endereço-da-fonte-ttf/fonte.ttf'),

url('http://endereço-da-fonte-eot/fonte.eot');

}

Adicione isso ao CSS do seu template substituindo as seguintes partes: em verde, você deve colocar o nome da fonte. Em laranja, coloque o endereço da fonte TTF. Em azul, coloque o endereço da fonte EOT. No meu caso ficou assim:

@font-face {

font-family: Lobster Two;

src: url('http://dl.dropbox.com/u/34805773/LobsterTwo.ttf'),

url('http://dl.dropbox.com/u/34805773/LobsterTwo.eot');

}

Aplicando a fonte em algum lugar

Agora que você já colocou a fonte no seu layout, você vai usá-la, com o seguinte código CSS:

#objeto {
font-family: Nome da Fonte;
}

Em verde você colocará o nome da fonte, que você usou antes. Em azul, você colocará o id da div que você quer aplicar a fonte. Para quem não sabe, as tags HTML div são usadas para separar os elementos HTML. Você pode, por exemplo, aplicar uma regra CSS apenas em uma div, e não na página inteira. Para aplicar a fonte em uma div com o ID "objeto", usamos o seguinte código:

<div id="objeto">
Conteúdo da DIV
</div>

Lembre-se que o ID pode ser o que você quiser, mas ele deve ser o mesmo tanto no HTML, quanto no CSS. Meus códigos ficaram assim:

CSS:

#fonte {
font-family: Lobster Two;
}

HTML:

<div id="fonte">
Olá, isso é uma div com a fonte Lobster Two. Se você estiver usando um navegador compatível, verá essa frase escrita com ela.
</div>

Você também pode usar uma fonte para vários objetos. Por exemplo, com o código a seguir, todas as fontes com o tamanho h2 (header 2) terão uma determinada fonte.

h2 {
font-family: Nome da Fonte;
}

Onde consigo fontes?

Há muitos lugares na internet para baixar fontes. Temos uma postagem com várias sugestões de fontes legais, clique aqui para ver. Outra opção é o Google Web Fonts, que tem uma boa variedade de fontes grátis. Clique aqui para acessar o Google Web Fonts.

Conclusão

Veja o resultado em uma demonstração, clicando aqui!

Fontes com CSS3 são uma boa opção para navegadores modernos. Finalmente é possível usar qualquer fonte que você queira. Nunca custa lembrar que o Internet Explorer 6, 7 e 8 não suportam fontes com CSS3, somente as versões 9 e acima.

~Juca