Inserindo fontes diferentes em seu site ou blog com Cufón

Em alguns posts atrás, eu ensinei a colocar fontes diferentes da de sistema em seu site utilizando o google font api.

Hoje apresento uma solução diferente, utilizando o Cufón!

Mas Que nome esquisito... o que é esse tal de Cufón?

Cufón é uma ferramenta, que gera um script a partir de qualquer fonte, jogando esse script em seu site, você pode criar um texto para seus títulos, utilizando fontes diferentes da de sistema... Este script irá gerar automaticamente uma imagem e fará um image replacement em seu texto.

Veja como configurar em poucos passos:

1. Escolha a fonte que irá utilizar, e entre no site do cufón http://cufon.shoqolate.com/generate/

2. Está vendo estes campos? Aqui você deverá enviar (caso exista) as variações de sua fonte, como negrito, itálico, negrito itálico, etc.

3. logo abaixo, cheque a opção "The EULAs of these fonts allow Web Embedding (without Adobe Flash)" e no final da página a opção "I acknowledge and accept these terms".

4. Ao clicar no botão "Let's do This", a ferramenta gerará um script com o nome da fonte selecionada, baixe este script e salve em seu computador.

5. Baixe também o script da ferramenta clicando aqui ou no botão download no menu da ferramenta (primeiro item).

6. Insira os 2 scripts em sua página html da seguinte forma:

Note que estou utilizando a fonte "centaur".

7. Crie um título e dê uma classe para ele, tudo que estiver nessa classe será substituída pela fonte escolhida logo logo... por exemplo, criei um h1 e dei uma classe "fonte" para ele:

8. Agora insira este script no head de sua página para substituir tudo que for da classe "fonte" para a fonte que você escolheu e gerou o código via Cufón.

9. Para funcionar direitinho no IE, insira este script antes do final do body:

Prontinho, faça o teste, seu título H1 deve ser substituído pela fonte escolhida, no meu caso, useia a "centaur".

Veja um exemplo

Baixe um modelo