Olá! Muitas pessoas me mandaram e-mail com a mesma dúvida: Como colocar fontes diferentes no site e não precisar criar uma imagem? Nesta coluna responderemos esta pergunta tão frequente. Este efeito não é muito simples. Muitas pessoas acreditam que apenas colocando o script CSS certo e uma fonte .ttf o script irá funcionar, porém ele acaba não funcionando.

Antes de começarmos, precisamos de uma fonte. Este script funciona apenas com fontes com as extensões .eot ou .pfr. Para utilizar fontes .ttf você precisará de um programa que converta estas fontes para .eot ou .pfr, recomendo utilizar o Microsoft Weft que é freeware.

Você não encontrará fontes .eot para download em algum site, você precisa criá-las. O motivo de não ter fontes .eot para download é que ela tem uma particularidade. Ao criar uma fonte .eot você define onde ela será usada, em que lugar (site, pasta) e ela só funcionará neste lugar. Por isso não adianta copiar de algum site, porque a fonte só funcionará no site da pessoa que criou.

Transformando fonte .ttf em .eot com o Microsoft Weft

Após fazer o download (9.26MB) do programa Microsoft Weft, instale na sua máquina.
Crie um arquivo html em C:/, neste arquivo html utilize a fonte diferente.

Exemplo:

< body> face="Alanis Hand">Fonte Diferente

Alanis Hand é o nome da fonte que quero utilizar no meu site. A fonte deve estar instalada em C:/Windows/Fonts para que o Microsoft Weft identifique-a.

Abra o Microsoft Weft, clique em Tools > Recreate Font DB. O Microsoft Weft irá identificar as fontes que existem no seu computador, este processo demorará um pouquinho. Agora que o Microsoft Weft já identificou as fontes do seu computador, clique em Wizard para criar a fonte.

Se for a primeira vez que você utiliza o Wizard, aparecerá a tela "Start" e depois "Set user Information", ele pedirá seu nome completo e e-mail para adicionar no código CSS, indicando quem o criou. Na tela "Add Web Pages" coloque o endereço do seu site ou arquivo. No exemplo eu coloquei o caminho do arquivo html que eu criei.

Clique em Add, vai aparecer uma árvore de arquivos. Clique em Avançar. Na tela seguinte, "Analyse Web Pages", o Microsoft Weft avisa que ele está pronto para analizar a página, ele recomenda que você abra o arquivo no Internet Explorer para ver se a fonte está sendo exibida e lembra que algumas fontes não possuem certos caracteres e acentos. Clique em Avançar. Após analizar as fontes do arquivo, o Microsoft Weft mostrará se ela é:

Editable ou Installable. Esta fontes podem ser transformadas em .eot e podem ser utilizadas em qualquer página.

Previewable - Estas fontes também estão OK para serem 'embed' mas só podem ser utilizadas em páginas estáticas. Sites onde o usuário não pode editar o texto.

Windows core font - Estas fontes são identificadas como fontes comuns. Não é recomendado 'Embedding' estas fontes.

'No embedding' font - Estas fontes tem a permissão ajustada para 'no embedding'. Se uma fonte que você quer usar esta marcada como 'no embedding', entre em contato com o criador da fonte e peça para ele ver se pode providenciar uma versão 'embeddable'.

Font may be broken! - Estas fontes não podem ser 'embedded' por que ela tem algum erro. Se você quiser utilizar a fonte, entre em contato com o criador da fonte e veja se existe uma versão atualizada.

O Microsoft Weft encontrou duas fontes no meu arquivo: Alanis Hand e Times New Roman. As duas fontes possuem o sinal verde, portanto posso utilizá-las. A Alanis Hand é Editable e a Times New Roman é Installable. As duas já foram ajustadas como 'Embed' = 'Yes' (se estiver vazio a fonte não se transformará em .eot) e 5 Chars ( é o número de caracteres que eu utilizei com a fonte no meu arquivo html).

Antes de avançar, selecione a fonte (clique no nome dela), aparecerá três novas opções no meu embaixo: 'Embed' ou 'Don't Embed', 'Subset' e 'Details'. A primeira coisa a fazer é ver se sua fonte está com 'Yes' em Embed, se não estiver clique em 'Embed'. Depois clique em Subset e selecione todos os caracteres que deseja utilizar no seu site.

Se você quer utilizar todos os caracteres, antes de clicar em 'Subset', clique em 'Add', adicione uma fonte qualquer, quando ela for adicionada as fontes ficarão com todos os caracteres selecionados, o número aumentará, para confirmar que está tudo selecionado, clique em 'Subset'. O comando 'Add' serve também para adicionar fontes que o Microsoft Weft não identificou no seu arquivo, porém você quer utilizar.
Clique em avançar.

Na tela "Create Font Objects do Wizard", você escolherá onde quer salvar a fonte .eot, eu escolhi o C:, você pode salvar em um ftp ou em um site. Em "Fonts may only be used from pages under these roots", clique em Edit, e adicione o site ou pasta em que o arquivo será utilizado.

A fonte só funcionará nos arquivos que estiverem neste lugar (site ou pasta). Para que você não precise digitar o CSS, deixe selecionado o item: "Show CSS @font-family declarations". Clique em avançar. as fontes serão criadas e o CSS será exibido. Selecione o que aparece na caixinha e copie. Na tela "Publish Web Pages" clique em Avançar e depois em Concluir.

Pronto! Fonte criada!

Agora que temos a fonte, é só utilizar o script CSS para adicioná-la em suas páginas.

Exemplo: