Como criar @font-face?

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.

<h1>Testando @Font-Face</h1>

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.

@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;
}

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

h1{
  font-family: 'FuturaMdBTMedium';
}

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