Fontes declaradas com @font-face não funcionam no Firefox

  • Última modificação: 05/06/2013
  • Tempo de leitura: 1 min.

Se no seu ambiente de desenvolvimento o Firefox exibia todas as fontes e na hora de colocar o site em produção a sua fonte virou comic-sans pode ficar mais tranquilo (se o seu servidor aceitar .htaccess). O problema acontece porque o Firefox tem uma restrição de arquivos de fonte mais severa que os outros browsers.

Para contornar basta colocar este código no seu .htaccess e ser feliz.

AddType font/ttf .ttf 
AddType font/eot .eot 
AddType font/otf .otf 
AddType font/woff .woff 

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

UPDATE: Depois da dúvida apresentada pelo rafael, fui procurar e aparentemente existe uma solução para usuários do IIS também. Seu web.config deve conter o seguinte:

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
    <system.webServer> 
        <httpProtocol> 
            <customHeaders> 
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders> 
        </httpProtocol> 
    </system.webServer> 
</configuration>

Felipe Elia

Associate Director of Platform Engineering na 10up, WordPress Core Contributor, Global Polyglots Mentor na comunidade internacional do WordPress e Locale Manager na comunidade WordPress Brasil.

Este post tem 26 comentários

  1. André Buzzo

    Cara … você derrubou a árvore agora!!

    Valeu!

  2. Douglas Maia

    Felipe, blz?

    Também não consegui usando esse argumento no .htaccess, poderia me dá um help se possivel. No Chrome e no IE funciona de boa. A URL para o site é http://www.luxside.com.br

    Obrigado!

  3. Piero Brito

    O meu aqui continua com problema, só funciona no Chrome 100%! Será que tem mais alguma coisa para fazer?

  4. Adeisa Emanuelle

    Cara, meu blog é na plataforma blogger, então não dá pra ser feliz usando font-face :s No firefox e IE fica tudo errado…

  5. Wander Soares

    Boa dica, isto me vinha quebrando a cabeça
    grande abraço

  6. Thiago

    Cara eu estou usando a plataforma vtex, não tenho acesso ao htaccess nem webconfig como eu resolvo o problema.?

    1. Felipe Elia

      Você pode colocar as fontes em outro servidor e colocar o htaccess lá.

    1. Felipe Elia

      Nem no firefox nem em nenhum outro. O problema é o caminho para os arquivos de fonte: só checar esse caminho para os arquivos (colocar uma / na frente) que vai funcionar. Abs!

  7. Keven Jesus

    cara salvou meu pescoço um abraço rsrs

  8. Elvis Galvone

    Dica bastante valiosa! Problema resolvido. Valeu!

  9. jeff

    Consegui!!!!! estava colocando no virtualhost removi e coloquei no .htaccess e FUNCIONOU 100%…

  10. jeff

    Funcionou 100% quando estou sem https:// , e quando estou no HTTPS:// NÃO FUNCIONOU TOTALMENTE, alguma SUGESTÃO ?

  11. rafael

    cara, e se o meu site é num servidor windows e não tem arquivo .htaccess?

    o que eu faço para ser feliz?

    1. Felipe Elia

      Fiz um update no post rafael. Se chegar a testar avisa se funciona!

  12. João Ellery

    eu coloquei uma linha acima de todo meu código CSS e funcionou

    @charset “utf-8”;

  13. Diego

    Não funcionou no meu site, estou tentando usar a fonte Brody.

    1. Elia

      Você está declarando a fonte em que arquivo?

  14. Taynara

    Fiz essa alteraçao e funcionou no Firefox, mas não no Internet Explorer.. O que acontece? no Chrome e Safari funcionam

    1. Elia

      O Internet Explorer aceita um formato de fonte diferente, com extensão EOT. Você tem os arquivos com esta versão?

  15. Paulo Ricardo

    Funcionou certinho. Grande ajuda!

  16. Matheus

    Boa noite , o meu font-face não pega em alguns navegadores , opera , IE mozilla gostaria de ajuda

    1. Elia

      Matheus, seu projeto tem que estar online em algum lugar para que eu possa dar uma olhada ok? Abs.

  17. vinicius

    o meu continua aparecendo a fonts errada… porque sera em

    1. Elia

      O projeto está online em algum lugar que eu possa dar uma olhada para tentar te ajudar?

Comentários encerrados.