Menu

Usando @font-face em todos os navegadores

Há alguns meses atrás fiz um posts sobre o Google Fonts, onde mostrei uma alternativa para usar fontes diferentes das que os usuários têm em suas maquinas. Neste tutorial vamos ver como usar em todos os navegadores (inclusive o IE6 ) a nova e utilíssima propriedade @font-face do CSS3, essa propriedade tem a função de carregar fontes externas, ou seja, fontes que o usuário não tem instaladas na sua maquina. Vamos ao tutorial:

Antes de tudo precisamos de uma fonte certo?!

Eu usei a SCARFACE.ttf, se quiserem usar outra, sem problema.

Agora a sintaxe:

Onde

  • font-family: ‘scarface'; , é o nome dado a fonte,
  • src: url(‘scarface-webfont.eot’); , é a fonte com o formato .eot, para que o IE reconheça,
  • src: local(‘scarface’),  caso a fonte esteja instalada na maquina do usuário, então carrega-se esta fonte e não a que esta no site,
  • url(‘scarface-webfont.ttf’) format(‘truetype’); a fonte no formato truetype, reconhecida por todos os navegadores decentes :D


Legal, mas como uso a fonte agora?

Simples, use a mesma propriedade (font-family) e coloque o nome que foi definido para ela, por exemplo:

Veja um exemplo:

Veja o @font-face funcionando

Dicas:

É interessante usar as seguintes definições, para fazer um “reset” e evitar que apareça de forma diferente em certos navegadores.

Para converter as fontes para .eot, você pode usar o serviço online – fontsquirrel

Isso é tudo pessoal, divirtam-se!

[lomadeewpro category=’3482′ keywords=’css’]

22 comentários em “Usando @font-face em todos os navegadores

  1. Andre

    Nao funcionou comigo.

    Primeiro, que url é essa que vc colocou? Da onde voce ta pegando ela? O arquivo esta em uma pasta do seu projeto? esta na internet? Eu preciso colocar a url completa? se preciso então porq voce usou apenas esse pedaço!? qual a extensão valida? voce disse que tinha que ser ttp ou eot para IE mas no link para a font q vc usa esta com extensão .font!!!!

    Eu usei exatamente o mesmo codigo q vc e nao apareceu a font no meu site.

    Segundo: voce colocou alguns comandos com aspas simpes (‘) vi outros exemplos em que se usa aspas comum (“) e outros nem aspas usam; oq é isso? cada um faz oq quer?

    resumindo: nao entendi, nao funcionou. Desculpe minha agressividade, mas eu só tenho encontrado “tutoriais” aonde ninguém diz nada que outro já nao tenha dito.

    O artigo do google fonts funcionou, com @font-face nao.

    Reply
    1. Marcelo Torres Autor do post

      Olá André, vamos lá para as respostas:
      que url é essa que vc colocou?
      R: É o caminho onde está o arquivo da sua fonte
      Da onde voce ta pegando ela?
      R: Depende, se for aonde eu baixei foi no link do post no site dafont, se for onde ela está armazenada, ela está no meu servidor, numa pasta, como se fosse uma imagem
      Eu preciso colocar a url completa?
      R: Não, apenas uma url relativa, como se você ticesse usando uma imagem no css, por exemplo, se tivesse dentro de uma pasta fonts, ficaria – fonts/scarface-webfont.ttf
      qual a extensão valida?
      R: .eot para o IE e .ttf para os demais navegadores, também pode ser utilizado o formato .woff, você precisa fazer o download da font para o seu computador e depois converter para estes formatos, usando o link que está no post, depois da conversão irá ter um .zip com os formatos citados, dai é só usar!
      voce colocou alguns comandos com aspas simpes (‘) vi outros exemplos em que se usa aspas comum (“) e outros nem aspas usam; oq é isso? cada um faz oq quer?
      R: Sim, cada um faz o que quer, pois todas as formas darão certa.

      Tente denovo, boa sorte!

      Reply
      1. sander sites

        aki deu certo e coloquei assim no css:

        @media screen {
        @font-face {
        font-family: ‘VegurExtraLight';
        src: url(‘fonts/VegurExtraLight.eot’);
        src: local(‘Asap’), local(‘Asap-Regular’), url(‘fonts/VegurExtraLight.eot?#iefix’) format(‘embedded-opentype’),
        url(‘fonts/VegurExtraLight.ttf’) format(‘truetype’);
        font-style: normal;
        font-weight: 400;
        }
        }

        Reply
    2. Cláudio

      Olá Marcelo,

      O que posso fazer acontece que algumas palavras com acentuação não funcionam em alguns navegadores ou seja, no meu caso, @Font-Face resulta só no Chrome. No mozzila e no IE esses caracteres mudam para outra fonte. Grato Cláudio

      Reply
  2. Alexandre Rodrigues

    Olá,
    estou precisando de uma ajuda.

    estou usando o @font-face. com a font BEBAS NEUE
    só que o @font-face não está funcionando nas versões 7. 8. 9 do mozilla firefox
    nos outros navegadores funcionam de boa só nessas versões do mozila que não funciona.

    pode me ajudar a solucionar esse problema?

    Reply
  3. Caio

    No Safari, tenho alguns labels que precisam do font face, então declarei o seguinte:

    .box-lista-top label{
    font-family:”Myriad”, arial;
    font-size:18px;
    color:#000;
    margin-bottom:5px;
    float:left;
    }

    Acontece que no Safari, ele só funciona no primeiro item, os demais ficam com a fonte arial, tem alguma idéia do que pode ser ?

    Reply
  4. Diego Sabino

    Estou fazendo um projeto aqui no meu estágio e o problema é o seguinte: Deu tudo certo no meu computador e em todos os outros computadores aqui do laboratório, pois estou acessando pela rede interna o servidor local. Inclusive, funciona no firefox, google chrome, e IE . O problema é que só tem um notebook , de uma das minhas chefes, que está com problema. A fonte fica falha, como se não tivesse usando a propriedade da font-face e eu declarasse o uso de tal fonte.
    É interessante também, que uso uma dataGrid do primefaces e também não pega apenas no computador dela.
    Alguém tem alguma ideia do que possa ser?

    Reply
    1. Natasha

      Ou todos os computadores têm a fonte instalada e aí eles procuram local e rodam a fonte já instalada, ou a versão dos navegadores desse notebook da sua chefe não estejam atualizados.
      Tenta ver se todos os navegadores estão atualizados (com excessão do I.E pois muita gente ainda usa IE6 pra vc ter ideia e sempre testar em todas as suas versões). A segunda opção pode ser sistema operacional. Qual ela usa? E qual versão?

      Reply
  5. I

    Ja pensou em ler mais? se procurar a documentacao do internet explorer, a propriedade font-face é antiga nele, porém agora que a W3C resolveu padronizar esta propriedade.

    Reply
  6. Jeferson Naztick

    Olá amigo,
    segui seu tutorial, maravilha deu tudo certo no firefox e no Chrome, mas quando eu abro o Internet explores 10, ai e que está a dor de cabeça ele não aceita essa configuração , faz o teste no ie10 pra você ver só ainda mais essa fonte que você utilizou no exemplo, será que tem algo que possar ser feito a respeito?

    Reply
  7. Letícia

    Obrigada!!
    Não conseguia encontrar nenhum tutorial que me ajudasse com o IE. Ainda não testei nas versões anteriores, mas na 9 funcionou perfeitamente!!
    Sem contar que não conseguia encontrar nenhum site para converter .ttf em .eot e o que você passou é ótimo!

    Reply

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">