Typeface.js para usar fontes que não são de sistema com javascript

Isso pode ser bem útil e economizar muito tempo. Imagine a situação: o designer resolve fazer um site com uma fonte que ele achou no google. Resultado? programadores front end se ferram. Até hoje existia uma única solução cross browser pra renderizar a fonte, usando flash. Mas existe um projeto chamado typeface.js, open source e cross-browser para importar as fontes via javascript! Além disso a página continua acessível, inclusive para buscadores.

O projeto está em desenvolvimento mas ja é possível utilizá-lo.

Como funciona?

É só invocar o typeface e o script da fonte. Existe um arquivo javascript para cada fonte, caso você tenha uma fonte que não exista no arquivo deles, você pode subir ela e converter a fonte num arquivo javascript. Esse arquivo gera uma imagem pra cada palavra, subistituindo o texto original pela fonte desejada.

Veja detalhadamente como fazer:

Dentro da sua tag head, inclua os arquivos:

<script type="text/javascript" src="_scripts/typeface-0.10.js"></script>
<script type="text/javascript" src="_scripts/helvetiker_regular.typeface.js"></script>

Escreva o html e adicione a classe typeface-js nos elementos onde for atribuir alguma fonte que não seja de sistema.

<div class="titulo typeface-js">
	Exemplo de texto com helvetiker
</div>
<p class="texto typeface-js"> 
	Lorem ipsum dolor sit amet, 
	consectetuer adipiscing elit. 
	Nunc urna justo, dapibus nec, 
	porttitor a, rutrum id, velit. 
	Nulla et nulla. Nulla vitae pede. 
	Morbi tincidunt massa eu lacus. 
</p>

Depois é só atribuir a fonte no seu css, do mesmo jeito como se fosse arial:

div.titulo { 
	font-family: Helvetiker; 
	font-size: 30px; 
}
p.texto { 
	font: 20px  Helvetiker; 
	color:#444; 
}

Veja o script em ação no exemplo abaixo:

Você pode fazer download desse exemplo, com todos os arquivos e também pode ver outros exemplos no site do typeface.

Vale a pena dar uma olhada se você tiver um projeto que tenha fontes não sistêmicas a kilo, ou então títulos dinâmicos onde não dá pra fazer image replacement.

5 thoughts on “Typeface.js para usar fontes que não são de sistema com javascript

  1. Olá,
    sei que to meio atrasado, mas estava pesquisando exatamente este assunto e cai aqui.
    Você sabe me dizer como fica a indexação por buscadores dos textos que utilizam este script? Sabe se atrapalha ou se o robô lê igualmente ao texto normal?

    Obrigado.

    Thomaz Dantas

Leave a Reply

Your email address will not be published. Required fields are marked *