CHR Designer - WordPress Freelancer – HTML5 – CSS3 – Mobile – jQuery – Web Developer Freelancer – Freelancer Campinas – São Paulo – Brasil

Category: Web Designer

14/04
2011
2

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

Written by

Meu nome é Cesar H. Ribeiro sou Brasileiro e resido no interior de São Paulo, tenho 7 anos de experiência na parte de desenvolvimento web. Atualmente estou trabalho como webmaster freelancer a 3 anos, minha especialidade é implantação de CMS usando a plataforma Wordpress, transformando layouts personalizados em temas para Wordpress.

  • Facebook.
  • Google Plus.
  • Twitter.
  • Delicious.
  • LinkedIn.
  • Email.
TAGs:

2 Comentários

  1. Tiago disse:

    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

  2. Eduardo disse:

    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/

Deixe o seu comentário!

*
*



Post's AnteriosPost's Anterios
Como fazer menu em CSS Sprite
Post's RecentesPost's Recentes
Como alterar um valor via replaceWith
CHR Designer
contact me
contato
css3
fale conosco
Freelancer
Freelancer Campinas
html5
wordpress
xhtml

Did you like my Jobs??? Contact me

captcha