Olá para todos, hoje eu vou falar de @font-face não sei se todos conhecem, mas com essa técnica vocês conseguem colocar font’s não padrões no seu site, chega de falatório e vamos começar a por a mão na massa.

Vou escolher uma font muito usada para layouts a Futura Md Bt abaixo vou fazer um html bem simples.

[sourcecode language=”plain”]
<h1>Testando @Font-Face</h1>
[/sourcecode]

Depois de criar o código vou gerar as font’s “.eot – .svg – .ttf – .woff vocês tem que usar todos esses tipos para que funcione em todos os browsers.” , eu uso o site http://www.fontsquirrel.com/fontface/generator “atenção este site não funciona o upload da font se for linux somente em windows” .

Para fazer o uploader da font é muito simples, primeiro aperte o botão “add fonts” deixe carregar, depois selecione a opção “optimal” e por final aceite os termos de uso “Agreement” e aperte o botão “Download Your Kit”.

Depois de terminar o download é só descompactar o arquivo gerado e copiar as font’s para dentro do seu projeto, se você quiser crie uma pasta chamada font para que fique mais organizado.

Agora abra a pasta que fizemos download da font e edite o arquivo “stylesheet.css” porque dentro dele já tem o css pronto da nossa font, copie e cole no arquivo no exemplo que estamos fazendo, a única alteração que temos que fazer é colocar o caminho de onde esta nossa font veja o exemplo abaixo.

[sourcecode language=”plain”]
@font-face {
font-family: ‘FuturaMdBTMedium’;
src: url(‘font/futura_md_bt_medium-webfont.eot’);
src: url(‘font/futura_md_bt_medium-webfont.eot?iefix’) format(‘eot’),
url(‘font/futura_md_bt_medium-webfont.woff’) format(‘woff’),
url(‘font/futura_md_bt_medium-webfont.ttf’) format(‘truetype’),
url(‘font/futura_md_bt_medium-webfont.svg#webfontZaJl2R9s’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/sourcecode]

Depois de criar o @font-face no css vamos criar o um estilo para o h1.

[sourcecode language=”plain”]
h1{
font-family: ‘FuturaMdBTMedium’;
}
[/sourcecode]

Pronto agora estamos usando uma font não padrão em nosso projeto, vocês viram como é muito simples fazer isto, bom espero que ajude vocês qualquer dúvida ou sugestão é só comentar até o proxímo post.

Exemplo: Visualizar

Arquivos: Download

César Ribeiro
Written by

My name’s Cesar H. Ribeiro I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, actually I’m Web Developer Freelancer, my specialty is deploying CMS using the WordPress platform, transforming layouts for custom themes for WordPress. I worked with many agencies around the world like: Brazil, Australia, USA and Austria.

Related Posts

  • Cara, este post salvou a minha pele.
    faz dois dias que estou tentando fazer esta fonte funcionar e nada, já utilizo este recurso a muito tempo mais com essa fonte os caracteres com acentuação não stavam funcionando!!

    valeu demais

  • Eduardo

    Hey, bom artigo.
    Uma dica que eu estou usando atualmente, acho MUITO mais pratico que o @font-face é o Typekit, porém ele é pago. Mas custa a bagatela de R$100,00 por ano, então ao meu ver compensa muito pela fácil administração e quantidade de fontes boas disponíveis.
    Já conhece?
    https://typekit.com/