Importação de fontes especiais com CSS
tutorial passo a passo


versão em PDF // download

Configurações iniciais

  1. Faça o download e instalação da ferramenta Microsoft Weft
  2. Faça o download e instalação das fontes listadas abaixo para teste. (já testadas antes)

Próximos passos

  1. Acesse o menu file > new para criar novo projeto
  2. Adicione a página HTML que irá receber os novos códigos
    • Caso essa página venha a ser acessada por mais de um endereço não deixe de adicionar os complementares:
      Ex.: http://localhost/teste.htm - http://www.meusite.com/teste.htm - c:\teste\teste.htm
    • Caso esteja em processo de teste não utilize arquivos HTML que tenham sido usados em testes anteriores. Esteja certo de que está vazio.


  3. Clique em 'avançar'
  4. Clique em 'avançar' mais uma vez. Permitindo análise do(s) arquivo(s)
  5. Clique no botão 'add' para adicionar as fontes que serão importadas
    • Observe que somente as fontes com comentário "Installable" ao lado terão bom resultado. Todas as outras vão dar erro.

    • Para teste utilize as fontes indicadas acima.
  1. Clique em 'avançar'
  2. Indique um caminho local para a geração dos arquivos *.EOT
    • Aproveite para conferir se todas as possibilidades de acesso ao arquivo HTML estão previstas
    • Habilitar o item 'Show CSS @font-family declarations'


  3. Clique em 'avançar'
    • Apesar da ferramenta indicar que pode demorar, não é o que normalmente acontece
    • Caso o WEFT trave você vai precisar fecha-lo e reiniciar a operação
    • Observe os items anteriores em negrito que podem ocasionar o travamento.
  4. Ao fim você terá um relatório com o código necessário para a importação das fontes
    1. Copie e cole no head do seu documento HTML alvo


  5. Confira a criação dos arquivos de extensão '.EOT' na pasta indicada


  6. Para que você consiga testar se a fonte está sendo realmente importada ou o Browser está usando a fonte instalada em sua máquina prefira:
    • Trocar o nome da fonte indicada


    • Faça uso das fontes importadas
      • Você pode tanto usar isntruções CSS como HTML
        Ex.: <span style="NeuropoolTeste">Texto exemplo</span>
            <font face="NeuropoolTeste">Texto exemplo</font>
    • Teste nos diferentes endereços indicados na configuração da fonte
    • Elimine qualquer caminho físico que seja incluído
      Ex.: C:\teste - eliminar


  7. Confira a página de possíveis erros do WEFT)

Código final HTML

<html>
<head>

<STYLE TYPE="text/css">

@font-face {
font-family: NasalizationTeste;
font-style: normal;
font-weight: normal;
src: url(NASALIZ0.eot);
}
@font-face {
font-family: NeuropolTeste;
font-style: normal;
font-weight: normal;
src: url(NEUROPO0.eot);
}
@font-face {
font-family: AcknowledgeTeste ;
font-style: normal;
font-weight: normal;
src: url(ACKNOWL0.eot);
}

--></STYLE>
<title>Página de teste</title>

</head>

<body>

<p>
<font size=4 face="NasalizationTeste">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</font>
</p>

<p>
<font size=4 face="NeuropolTeste">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</font>
</p>

<p>
<font size=4 face="AcknowledgeTeste">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
</font>
</p>

</body>
</html>