Fonte: Rafael Cirolini/NeardHead
Em geral sempre que vem um layout novo temos que colocar uma fonte diferente para a produção do site. Existem varias técnicas para isto, image replacement, sIFR, cufón e @fontface que é o que vamos falar aqui.
A grande vantagem do uso do @fontface é por ser um recurso do próprio CSS e carregar muito rápido no navegador em comparado com as outras técnicas. Nos meus testes esta técnica funcionou em todos os navegadores modernos, inclusive no IE6 (que não é moderno).
Usei esta técnica em meu mais recente site, Dicas de Livros e Filmes. Como segue a imagem abaixo:
Font Face Generator
Antigamente era um pouco complicado usar o fontface pois cada navegador trabalhava com um tipo de fonte diferente. Hoje a solução que temos é o FontFaceGenerator, que através de uma interface bem intuitiva gera todos os tipos de fonte para vc e ainda um código de exemplo de como utilizar.
No meu caso, eu coloquei as fontes geradas em uma pasta chamada fonts dentro da pasta do meu tema em wp-content -> themas -> dicasdelivros -> fonts.
E o meu css ficou assim:
@font-face { font-family: 'SketchetikLight'; src: url('fonts/sketchetik.eot'); src: url('fonts/sketchetik.eot?iefix') format('eot'), url('fonts/sketchetik.woff') format('woff'), url('fonts/sketchetik.ttf') format('truetype'), url('fonts/sketchetik.svg#') format('svg'); font-weight: normal; font-style: normal; }
E quando preciso usar ela fica assim:
h1 { font-family: 'SketchetikLight'; }
Em outro artigo escrevi como usar o Cufón.