Aqui entre nós. Esses designers deveriam aprender um pouco mais sobre html. Acho que vou escrever para o MEC para incluir html na grade curricular do curso de design web. Esses caras acham que se é possível desenhar um site no Photoshop é possível fazer ele em html, ainda mais tendo que fazer funcionar no IE6. Aff. Um tempo atrás peguei um site para produzir e criar um template para o WordPress e o design colocou todo o conteúdo do site em uma fonte “esdrúxula” e eu procurei uma fonte padrão mais parecida com a dele, e o cara veio reclamar que não era a fonte que ele “criou”. Oh deus do design!

Um tempo atrás o site do PatioSavassi tinha dezenas de flash só para colocar os títulos das seções com fontes diferente, uma solução aceitável mas de muito código. Bom vamos ao que interessa. Nesses momentos que os design te fazem raiva com fontes “esdrúxula”. Você só precisa fazer algumas “coisinhas”. Primeiro pedir os arquivos das fontes para ele. Depois utilizar esse script muito interessante e simples de usar. Cufón – fonts for the people.

Basta você fazer o download da biblioteca, escolher a fonte desejada e gerar o script da fonte atraves do site. Após preencher as informações necessárias e selecionar a fonte clique em “Let’s do this!”. Baixe o script que ele irá gerar e divirta-se. Outra coisa interessante é que o script captura informações do seu CSS criando os canvas com os atributos dele.

Exemplo fonte “Cherif”

Viu como é fácil colocar isso em sua página.
Até em links com hover: Varal de Bits

CSS
<style type=”text/css”>
  #varal-de-bits {color: #86A63F;letter-spacing:1px; }
  #varal-de-bits a {color: #86A63F}
  #varal-de-bits a:hover {color: #B7BFA7}
</style>

Javascript
<script type=”text/javascript” src=”cufon-yui.js”></script>
<script type=”text/javascript” src=”cherif_400.font.js”></script>
<script type=”text/javascript”>
  Cufon.replace(‘#varal-de-bits p’, { textShadow: ‘#000 1px 1px’, hover: ‘true’});
</script>

HTML
<div id=”varal-de-bits”>
  <div>
    Viu como é fácil colocar isso em sua página.<br />
    Até em links com hover:
    <a href=”http://www.varaldebits.com.br”>Varal de Bits</a>
  </div>
</div>