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.
E como fica o carregamento da página? Vc notou se fez diferença?
Acho não entendi a pergunta amigo. Você quer dizer, o peso?
[]s
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
Olá Thomaz, a indexação é normal.. o robo lê o html puro.
No meu caso, funcionou no Firefox e no Google Chrome, mas no Internet Explorer 8 ficou em branco. O que pode ser?