Voltar para o site

Importar fontes especiais com CSS

Publicado em: 09/06/2004

Este tutorial foi escrito por Hugo Dias
Project and Strategy Leader, Agência Meetweb
Macromedia Certified Instructor (MMCI)
Professor do Instituto Infnet - Rio de janeiro
URL do original: https://www.meetweb.com.br/hugodias/palestracss/tutorial/
Transcrito com autorização expressa do autor

Versão em PDF deste tutorial disponível no site do autor

Configurações iniciais

Faça o download e instalação da ferramenta Microsoft Weft

Faça o download e instalação das fontes listadas abaixo para teste. (já testadas antes)

Próximos passos

Acesse o menu file > new para criar novo projeto

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.: https://localhost/teste.htm

https://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.

Screenshot do painel arvore

Clique em 'avançar'

Clique em 'avançar' mais uma vez. Permitindo análise do(s) arquivo(s)

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.

Screenshot de alerta de erros

Para teste utilize as fontes indicadas acima.

Clique em 'avançar'

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'

Screenshot dos caminhos a indicar

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.

Ao fim você terá um relatório com o código necessário para a importação das fontes

Copie e cole no head do seu documento HTML alvo

Screenshot do código fonte

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

Screenshot dos arquivos criados

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

Screenshot de código fonte

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

Screenshot de código fonte

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

Código final HTML

@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);
}

<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>

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo