Tableless - Desenvolvimento inteligente com Padrões Web

30/03/2010
CSS

Propriedade @font-face CSS – Fonts externas na web

@font-face possibilita utilizar fonts externas em websites. Você já pode utilizar essa regra agora.

Por

Tipografia na web sempre foi um sonho para todo designer. Alguns designers que trabalharam durante muito tempo com impressão se sentem presos com web por conta da limitação de escolha das fonts. A tipografia é parte importante na criação de peças gráficas e na web isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar uma fonts que não seja padrão do sistema operacional do usuário na criação de layouts para web. Iniciativas como TypeKite Sifr quebram o galho mas não são o ideal.

A regra do CSS chamada @font-face é uma das funcionalidades que foram mais aguardadas. Ela permite que você utilize famílias de fonts fora do padrão do sistema. Veja abaixo a sintaxe:

@font-face {
     font-family: helveticaneue;
     src: url('HelveticaNeueLTStd-UltLt.otf');
}

Na primeira linha você define um nome para a font importada.
Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
	font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Suponhamos que você queira oferecer a font para os usuário que não a possuem instalada, mas para aqueles usuários que tem a font em seus sistema, o browser utiliza a cópia local do usuário:

@font-face {
     font-family: helveticaneue;
     src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da que está no servidor.

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fonts para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.

Veja um exemplo pronto.

Fonts pagas

O principal problema com na utilização de @font-face é que arquivo da font é disponibilizado no servidor, de forma que qualquer um tem acesso. Se você estiver utilizando uma font paga, com direitos de copyright, o download desta font pode ser ilegal e você que está disponibilizando pode ser responsabilizado. Há uma série de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.

Leia mais sobre @font-face direto do W3C.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

Newer Comments →
  • http://twitter.com/mangakatais Taís

    Fodassso! 8D eu já tentei usar uma vez um plugin no WP que fazia isso nos títulos, mas era chatinho… viva o CSS3 \o/

  • Pedro

    O IE6 também suporta o formato EOT. O último site que desenvolvemos onde trabalho utilizou font-face, e funcionou bem em quase todos os navegadores (Opera e Firefox 3.0 não carregaram a fonte): http://www.ufmg.br/mostra/ (nos nomes dos cursos tivemos que usar imagens, já que a fonte não possuía caixa alta).

  • Frank

    É´isso ai Diego sempre trazendo ótimas informações para nós, com certeza o @font-face vai ajudar muito os desenvolvedores. :-)

  • Pingback: Tweets that mention @font-face – Fonts externas na web | Boas práticas de Desenvolvimento com Padrões Web -- Topsy.com

  • Marcelo Casinha

    Isso realmente é muito bom, vai facilitar demais tanto para designers, que muitas vezes tem de se limitar na criação, quanto para desenvolvedores, que sofrem recortando imagens.

    Agora eu tenho uma dúvida, é possível setar anti-alias no CSS?

    Pergunto, pois na maioria dos casos em que essas fontes “diferentes” são usadas nos layouts, elas estão com anti-alias.

    Valeu!

  • http://www.alvoconhecimento.com.br Daniel Accorsi

    Olá Diego! Legal o assunto! Faz tempo que não é discutido algo nesse sentido. Com toda certeza a partir de agora muitos que seguem o Tableless irão voltar a pensar em usufruir do recurso.

    Abração! (chegou a hora de morfar? hehehe)

  • http://www.tobeguarany.com Leonardo Antonioli

    Fiz um teste com Firefox 3.6.2, Internet Explorer 8, Chrome 4.1 e Opera 10.51 (Windows).
    O melhor resultado obtido foi declarando:

    @font-face {
  font-family: minhafonte;
  src: url('Beautiful-ES.eot');
  src: local('Times New Roman'), url('Beautiful-ES.ttf');
}
p {
  font-family: minhafonte, Arial, Tahoma, Sans-serif;
}

    Dessa forma, Chrome, Firefox e Opera tentam pegar a fonte local. Se não acham, vão pra .tff remota. Observe que o que deve ser usado em 

    local

    é o nome da fonte e não o nome do arquivo!
    Já com o IE, não tem jeito. Ele vai direto na fonte eot e nem dá bola pra fonte local.
    Repare que usei como fonte local a Times New Roman. Como os tipos que seguiam a “minhafonte” na lista de fontes eram sem serifa, daria pra notar quando o navegador usasse a fonte local. Mas normalmente o que se deve declarar é o nome da fonte que você pretende usar, por exemplo:

    @font-face {
  font-family: "Minha Fonte";
  src: url("arlrdbd.eot");
  src: local("Arial Rounded MT Bold"), url("arlrdbd.ttf");
}
  • http://www.juliobitencourt.com Julio Bitencourt

    Fiquei surpreso com o suporte nos IEs. Já tinha lido sobre font-face, superficialmente. Achei que demoraria a usar por questões de suporte.

  • http://www.sobcontrollers.com/ Rubens Cavalheiro

    Nada de woff (Web Open Font Format) ?

    http://hacks.mozilla.org/2009/10/woff/

  • http://ramalhowebblog.blogspot.com Ramalho

    Alô família WEB,

    Excelente novidade, o vem ajudar o Image_Replacement e é um alívio para Nós. Grato por compartilhar informações muito úteis.

  • http://zisno.com Lucas Monteiro

    De fato, não há nada tão agradável quanto este recurso. Certamente, utilizar muitas imagens, pelo fato de muitas pessoas não terem aquela foto, não será mais um problema.

  • Fabrício

    Fala Diego, se por exemplo eu quiser mais de 2 fontes em uma mesma página, posso repetir o codigo:

    @font-face {
    font-family: helveticaneue;
    src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
    }

    @font-face {
    font-family: beautiful;
    src: local(Beautiful-ES.ttf), url(Beautiful-ES.ttf);
    }

    É assim que se faz? :D

  • http://danielfarias.net Daniel Farias

    Ótimo post, Diego. Dei uma olhada no site do Pedro e fiz uns testes com o as dicas do Leonardo.

    A conclusão que tirei foi:

    Nunca usei o @font-face antes e nunca mais deixarei de usar!

    Até a próxima!

  • http://www.tudopodre.com.br Psysapiens

    HTML 5 killer, Image Replacement.
    XD

  • http://www.chrisb.com.br Chris Benseler

    Graceful Degradation na veia pra aplicar essa funcionalidade, e muito cuidado, mesmo, por parte dos designers ao fazer a escolha das fontes.
    Fim ao uso de flash dinâmico para gerar títulos com fontes diferentes…

  • Glaucia Rezende
  • ruben

    no futuro a web nao terá mais imagens para se fazer layout ,apenas para fotos mesmo que ai nao tem como

  • Acelio

    Já vinha usando há algum tempo, a título de experiência, mas tem funcionado bem e agora é parte dos projetos.

    dicas:
    1- escolher arquivos leves. há boas fontes free que são leves.

    2- o bold e itálico nos textos só renderizam automaticamente no IE. Nos outros navegadores tem-se que usar toda a família de fontes, e declarar no css as regras para as tags html usarem a fonte, e combinar situações (b, i, strong, em – e as combinações: i b, b i, em b, em strong, strong em, strong i)

    3- o IE carrega primeiro as fontes para depois mostrar o conteúdo. fica a tela branca esperando.

    4- em algumas versões do FF e Crome, se tiveres a fonte instalada localmente (dependendo da fonte), pode dar problema com o tamanho da fonte na página. Só testando pra saber. Solução: informar um nome inválido na declaração “local” e forçar o carregamento da externa.

    5- A melhor forma de declarar @font-face é a fornecida automaticamente pelo site Font Squirrel. Copia e usa, sem pensar muito.

    O principal é não basear o layout da página na fonte externa que vais usar, mas sim naquela que vai substituí-la, caso o @font-face não funcione. Escolher uma fonte que ocupe o mesmo espaço na tela, que seja do mesmo tamanho… Se não funcionar, não estraga o layout.

    Obs.: o IE aceita fontes externas desde a versão 6.0

  • http://tioni.net Tioni Oliv

    Lindo! Agora só falta resolver aplicar Anti-alias, que o serrilhado deixa tudo com uma cara meio nerd… pessoalmente não me importo, mas suavizado é bem mais bonito.

  • zullcore

    É possivel usar 2 fontes .ttf e .eot com a mesma fonte para funcionar com todos navegadores?

    Ai em um H1 voce usa font-family com 2 fontes ai.. tipo helveIE e helveOutros

    font-family {helveIE,helveOutros}

  • http://apololira.com Apolo Lira

    Zull Core, com certeza há possibilidade de fazer isso, há algum tempo eu já uso esse recurso nos sites que desenvolvo, uma situação muito interessante que aconteceu comigo é que uma determinada font fica serrilhada e muito ruim quando a chamo via h2 ou h3, mas h1 fica perfeita, tanto no IE 6,7,8 quanto nos mais avançados. vale o teste ai.

    Acho que nao foi muito claro quanto ao maior benefício do Font Squirrel, no link de gerador você consegue otimizar a sua font deixando apenas caractéres que você utilizará, já tive casos da font ttf ter 650k, depois que ele optimizou e gerou ficou com 26k.

    bem leve, esse recurso é muito bom acho q muito nao aguentam mais as fonts de windows Arial, Tahoma…

    Parabéns pela iniciativa de divulgar o recurso para mais pessoas.

  • http://www.sergiorodrigues.art.br/blog Sérgio Rodrigues

    Extremamente interessante, estou aplicando alguns testes em meu portfolio..em breve no ar;

  • Vanessa Souza

    Ótimo post, comecei a usar o @font-face, funciona e estou adorando!!
    bjs

  • Pingback: Tipografia na Web, agora existe sim | Viablog

  • Vinicius

    Consegui fazer funcionar localmente, mas na internet não rolou! Copiei os mesmos arquivos mas não esta funcionando. Alguém pode me ajudar? Segue a parte do CSS que usei:

    @font-face
    {
    font-family: FuturaRCP;
    src: url(tipografia/FuturaStd-Book.otf);
    src: local(FuturaStd-Book), url(tipografia/FuturaStd-Book.otf);
    }

    Abs a todos!

  • http://www.droracio.blogspot.com Bruno

    Muito bom esse blog sempre quis entender um pouco mais sobre o assunto mas é um tanto dificil paassr do intermediário quando se tem apenas 15 anos de idade mas com o tempo eu pretendo me aprimorar visitem meu blog:Dr Orácio

  • http://designcombolachas.blogspot.com/ Thiago Cavalcanti

    “Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.”

    Conhece o Typekit?

    http://typekit.com/

    Também há type designers que já estão licenciando suas fontes diretamente para web designers.

    Do jeito que você escreveu parece que não dá para utilizar recursos comerciais nos sites que a gente cria. Se fosse o caso não teríamos sites de imagens de stock também!

    =P

  • http://www.angeosofia.com Anjo

    Muuuuuuuuuuuuuuuuito Bom.

    Muitíssimo obrigado.

    Abraço.

  • Glaucia

    Valeu, Leonardo Antonioli! A sua dica salvou meus neurônios… :) Obrigada!

  • Lari

    Só nos meus IE’s que nao funcionaram? Abri o demo disposto aqui e testei no 7 e 8, e nada! Chrome e Firefox, uma beleza.

  • http://www.andressamelo.com Andressa Melo

    Usei @font-face em alguns projetos com sucesso. Utilizei 2 formatos (.ttf e .eot) para a mesma fonte para funcionar em todos os navegadores. Testei no windows e foi perfeito! IE, Chrome, Safari, Opera…

    Porém no MAC nada funcionou, nem no iPad.

    encontrei outra solução:
    http://eltabisz.com.br/design/webdesign/cufon-titulos-com-imagens-sem-prejudir-o-seo/

    Funcionou em tudo, até no iPad. Porém fica pesado.

    Alguém testou o @font-face no Mac?

  • Pingback: Alex Cardoso » Blog Archive » Fontes externas no seu web site… sim agora é possível!

  • http://www.viconcursos.com/ dhuankles

    nossa isso é muito bom.. ja uso isso em meus sites.. parabens pelo o artigo..grato

  • Pedro

    Quer dizer que pra funcionar nos browsers mais usados (leia-se IE-8 e Firefox) eu preciso carregar dois arquivos de fonte? Um EOT e outro TTF/OTF?

    Me parece ridículo. Espero um suporte mais adequado.

  • Pingback: Fonts externas na web « CESARCABRAL – Art Director

  • Luis Claudio

    Usar font-face = epic fail.
    Se você tem a fonte instalada no seu computador, funciona. Se não tem, não funciona.
    Não funciona com IE, Firefox e tem suporte limitado no Chrome.

  • Pingback: Seu site com a sua fonte preferida « Meu Espaço – Alexsander – Webdesigner

  • Pingback: CSS3 – O que vem por aí… | Boas práticas de Desenvolvimento com Padrões Web

  • Pingback: CSS3 – O que vem por aí… « Diego Alves

  • Pingback: Portal de Notícias Design Silva

  • http://www.robsonmoulin.com.br/blog Robson Moulin

    Olá pessoal, ótimo post!, até os comentários da galera me ajudaram, pois já tentava utilizar o fontface a algum tempo mais sempre eu ficava na opção de ou usar o ttf ou então o eot e caia no dilema qual browser que vou priorizar mas lendo os comentários descobri que posso usar duas urls e todos os browser leêm as fontes.

    Fiz os testes com este código e funcionou corretamente (A fonte baixei de um site que disponibiliza tipografias free.

    @font-face {
    font-family: ‘AcadianRegular’;
    src: url(‘acadian-webfont.eot’);
    src: local(‘Acadian’), url(‘acadian-webfont.ttf’) format(‘truetype’);
    }

    h1{
    font-family: AcadianRegular, Arial, sans-serif;
    }

    Abraço a todos!

  • http://www.wevertonnaves.com.br Weverton Naves

    Muito bom artigo. Por muito tempo utilizei de técnicas como o Cuffon, mas o processo era muito trabalhoso e o resultado final correspondia a páginas carregadas e cheias de código sujo. Essa técnica de font-face é simples, prática e ideal para o futuro da web.

  • Pingback: Usando diferentes tipos fontes na internet. | Glaudson Alcântara

  • http://benetti.blog.br Riccardo Benetti

    corrigindo, o EOT funciona desde o IE4.0 (meados de 1997) só que naquela época a ferramenta de conversão era caríssima e o Netscape ainda era o melhor browser.

  • http://www.duettocomunicacao.com Lidiane

    Nossa, estava à procura de algo semelhante a essa dica,só você mesmo para solucionar.
    Parabéns e continue contribuindo para nós, meros desenvolvedores
    web.

  • Rafael Baialuna

    Chrone: Ok
    Firefox: Ok
    IE: Trouble

    O que era esperado, rs!

  • http://www.gs3internet.com.br Fred

    Diego, belo artigo. Simples e detalhado. Só um toque, fora do assunto: tem que corrigir o licença no paragráfo “Fonts pagas”. Abração.

  • http://glauciarezende.com.br Glaucia Rezende

    Ó Potentíssimo, Diego!
    =D tudo bom?!

    Galera, alguém pode me dizer se a licença “GNU General Public License” pode ser usada no esquema @font-face sem esbarrar no direito autoral?

    Algumas fontes ficam serrilhada… tem remédio?

    Agradecida, Valeu!

Newer Comments →