Como usar qualquer tipo (fonte tipográfica) em seu blog WordPress
Uma das (ainda) grandes limitações da web refere-se à usar qualquer fonte tipográfica em web sites. Por padrão, caso a pessoa não tenha determinado tipo que tenha sido especificado para ser exibido, o navegador renderiza por um que seja o mais próximo ou secundário – determinado pelo próprio desenvolvedor. Isso, realmente, é uma limitação, já que não é possível “controlar” inteiramente como será a exibição de tipos nos sites.
Enquanto algo melhor não é implementado por padrão, existe a possibilidade de fazer uma “gambiarra” para se exibir os textos em qualquer fonte tipográfica. São técnicas que variam desde a implementação “na unha” de imagens com textos, passando por javascript, à mudança de tipos usando Flash. São tantas as opções e scripts prontos que é como ir a uma loja onde tudo é gratuito: basta escolher e pegar.
Se você ficou “espantado” com o título deste artigo, “Como usar qualquer tipo (fonte tipográfica) em seu blog Wordpress“, leia algumas considerações sobre fonte, tipo, tipologia e tipografia.
Trocando os tipos dos títulos do blog com Facelift
Dentre as diversas opções de scripts e maneiras para usar qualquer tipo (fonte tipográfica) em web sites, indico o Facelift Image Replacement que, segundo diversos testes que fiz, mostra-se muito simples de instalar e produz resultados eficientes, trocando os textos de qualquer parte do site para qualquer tipo que se queira.
O Facelift faz sua “mágica” criando imagens em tempo real de textos de qualquer lugar de uma página web que você queira (e respeita o CSS especificado para o elemento, inclusive); e faz esta “reposição de tipos” utilizando o arquivo no formato de fontes, como .ttf ou .otf. Quer dizer, ele atua – com a licença do trocadilho – “direto na fonte“! ;-)
Isso sem falar em sua compatibilidade com os frameworks jQuery, Prototye, Scriptaculous e MooTools e com a grande vantagem de ser ideal para garantir a acessibilidade do blog, já que, se a exibição de imagens estiver desabilitada, o “texto puro” aparece normalmente.
Instalando o Facelift em seu blog Wordpress
O primeiro passo é acessar a página de downloads do Facelift para baixar sua última versão. Para o caso do Wordpress, você tem duas opções:
- Instalar em uma pasta no tema que você usa. Dessa forma, o script fica vinculado a seu atual tema e, praticamente, fará parte deste (se você mudar o tema, não mais terá o Facelift funcionando).
- Instalar em uma pasta independente de temas. Instalando o Facelift em uma pasta independente, ele continua funcionando independentemente de você alterar temas ou não (o único “porém” é para algumas linhas de código que devem ser inseridas, caso haja a troca).
Então, segundo a abordagem de instalar o Facelift na pasta do próprio tema, sugiro que seja uma pasta “js” ou “javasript”. Então, vá lá e crie uma pasta “js” na pasta de seu tema para dar prosseguimento à instalação do Facelift.
Depois disso, descompacte o Facelift nesta pasta remota “js” que acabou de criar. Uma observação: a pasta raiz do Facelift vem com a estrutura “facelift-[versão]“; pessoalmente, gosto de retirar o número da versão para manter a coisa enxuta (somente “facelift”); se você não quiser fazer isso, tudo bem, mas fique atento aos códigos de chamada ao Facelift que serão mostrados posteriormente.
Configurando o Facelift para usar qualquer tipo em seu blog Wordpress
Coloque na pasta “fonts” o arquivo do tipo que você vai usar. Então, configure o arquivo config-flir.php. Vá, lá, e altere o que for necessário – o arquivo é bem comentado, não se preocupe.
Depois de devidamente instalado e configurado, é hora de chamar os arquivos necessários ao funcionamento do Facelift e usar qualquer fonte tipográfica no blog! O primeiro passo é “chamar” o corretamente para que se possa usufruir de seus benefícios.
É possível inserir chamadas a javascript no head ou body de documentos web. O indicado é antes de se fechar a tag </body>, pois evita “travar” o carregamento da página e o script só é requisitado quando todos os outros elementos da página já foram carregados. Então, vamos chamar o javascript do face lift antes de fechar o corpo do documento (</body>), o que, provavelmente, deve estar no arquivo footer.php de seu tema Wordpress.
O “macete” é chamar o javascript através de PHP (especificando o local em que se encontra a pasta raiz do script, segundo indicado na documentação oficial do Facelift), já que será preciso identificar o diretório onde ele se encontra utilizando get_bloginfo().
<?php echo '<script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/facelift/flir.js">;</script>'; ?>
Depois, é preciso iniciar o Facelifit e especificar para quais elementos haverá substituição de tipos. Uma grande vantagem é que é possível utilizar a sintaxe do jQuery, devido à compatibilidade nativa que tanto Facelift quanto Wordpress têm do framework! Então, sabendo e identificando os elementos da página que terão tipos personalizados, basta especificar isso no código (como começamos gerando com PHP, vamos continuar).
O código final fica assim (no exemplo, altero os títulos secundários da barra lateral):
<?php echo ' <script type="text/javascript" src="' . get_bloginfo('template_directory') . '/js/facelift/flir.js"></script> <script type="text/javascript"> FLIR.init({path:"' . get_bloginfo('template_directory') . '/js/facelift/"}); $("#sidebar h2").each( function() { FLIR.replace(this); } ); </script> '; ?>
E pronto! Agora seu blog Wordpress pode usar qualquer fonte tipográfica, em qualquer local que você queira!
Importantes observações sobre a troca de tipos com o Facelift
Na verdade, o Facelift pode ser usado em qualquer tipo de site ou blog, seja Wordpress ou não. Entretanto, em função do peso de imagens – ainda mais geradas em tempo real – e performance do blog/site, em geral, é conveniente que se altere os tipos somente dos títulos e/ou áreas de destaque.
Importante notar que, como se trata de inserção de imagens, caso uma imagem estrapole a largura destinada ao elemento que foi “substituído” por ela, seu layout pode quebrar e/ou a imagem ficar semi-oculta, impedindo os leitores de a visualizarem por completo.
Portanto, se você utiliza artigos com título curto e/ou tem um espaço útil para os títulos considerável, use e abuse de tipos personalizados em seu blog/site; do contrário, limite-se a usar os tipos personalizados somente em áres de destaque ou textos que contenham poucas e pequenas palavras.
<update>
Confiram, também, o plugin para WordPress AnyFont.
</update>
Tárcio, amigão. Vou querer implementar isso no meu blog brevemente e conto com a sua ajuda! Mais um fantástico artigo.
Aproveito para referir que os seus artigos relacionados no fundo do post aparecem cortados em IE7 pelo menos.
Abração.
@ Paulo Faustino
Com ceteza ajudo você a implementar o recurso, Paulo, fique tranquilo! Quanto ao erro no IE7, muito obrigado por apontar; agora já está tudo ok! ;-)
Abraços!
Muito boa a dica, vou passar adiante no “Melhor da Semana” ^^
Abração!
@ yogodoshi
Sério?! Brigadão, mesmo, cara! Abraços e volte sempre!
Olá Tarcio,
Muitíssimo grata pela explicação. Sou novata no wordpress e fiquei com algumas dúvidas sobre como fazer a instalação do Facelift. Você disse que poderia ser utilizado de duas formas. Eu gostaria de fazer a primeira opção “Instalar em uma pasta no tema que você usa.”
Desculpe, mas não entendi como instalar “em uma pasta no tema”. É através do Windows Explorer?
Se puder me responder por email, agradeço muitíssimo!
Ah, parabéns pelo blog, é muito bom MESMO!! No dia em que eu souber como faz para criar aquela lista de blogs de amigos no wordpress, com certeza quero colocar o seu lá!!!
Um grande abraço,
Jacqueline
@Jacqueline
Então, Jacqueline, esta maneira, de instalar na pasta do tema, é a que foi explicada no tutorial. No Wordpress, cada tema que você usa está em sua própria pasta dentro de wp-content/themes/ – não é pelo Windows Explorer, é através do seu programa de FTP ou alguma interface web de FTP, nos quais são possíveis explorar os arquivos do site.
Abraços e obrigado por comentar!
ola
não existe nenhum puglin que faz a mudança da fonte do titulo do post?
obrigada