Qualquer tipo de fonte em seu site - 18 de março de 2010

Com a evolução da tecnologia começam a surgir formas de tipografar na web sem que o usuário visite sua página tenha determinada fonte instalada em sua máquina. Essa nova ferramenta, ainda em imersão na área, possibilita aos designer criarem interfaces mais ousadas e chamativas.

Primeiramente, precisamos entender como funciona o processo de renderização do browser. O browser solicita uma página web que contém um código HTML. Esse código é convertido para elementos DOM para que o browser consiga interpretá-los conforme as tags escritas no código. Após feita essa renderização dos elementos HTML na tela, aplicam-se as folhas de estilo (css) e os scripts (js) sobre os elementos contidos na pagina.

Entendido a forma de renderização iremos “instalar” em nosso site o facelift, que consegue renderizar fontes que não estejam na máquina cliente, e o jQuery, framework javascript. Baixe as útlimas versões de ambos e descompacte na mesma pasta.

Inserindo o facelift na página:

<script type="text/javascript" src="http://www.seu.site.com.br/js/facelift/flir.js"></script>
<script type="text/javascript" src="http://www.seu.site.com.br/js/jquery.js"></script>

Com o código inserido na página, abra o arquivo config-flir.php e altere o que for necessário. Não se preocupe o arquivo é bem comentado. Feito isso voltamos para o HTML e inserimos o último trecho de código para que o facelift funcione que é o de identificar os elementos DOM que serão renderizados com a nova fonte.

<script type="text/javascript">
#Iniciamos o facelift e dizemos a ele onde buscar os scripts
FLIR.init({path:"http://www.seu.site.com.br/js/facelift/"});

#Dizemos quais elementos o facelift deve renderizar usando jQuery
$("#sidebar h2").each( function() { FLIR.replace(this); } );
</script>

Em caso de dúvida sobre como usar o jQuery acesse o docs na área de seletores.

Atenção! Não renderize textos muito extensos para não afetar o desempenho do seu site.