Qualquer fonte no seu site com @fontface

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.

Tags | @fontface, css, fonte, FontFaceGenerator