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

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>
Tags:

Comentários

  • o meu continua aparecendo a fonts errada… porque sera em

  • Elia

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

  • Matheus

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

  • Elia

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

  • Paulo Ricardo

    Funcionou certinho. Grande ajuda!

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

  • Elia

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

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

  • Elia

    Você está declarando a fonte em que arquivo?

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

    @charset “utf-8”;

  • rafael

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

    o que eu faço para ser feliz?

  • Felipe Elia

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

  • jeff

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

  • jeff

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

  • Elvis Galvone

    Dica bastante valiosa! Problema resolvido. Valeu!

  • cara salvou meu pescoço um abraço rsrs

  • danilo

    Não funcionou comigo Elia, a fonte continua errada no firefox, dá uma olhada http://www.donazitabolos.com.br

  • 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!

  • Thiago

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

  • Felipe Elia

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

  • Ton

    Oi Felipe, também não estou conseguindo vencer o Firefox.

    http://www.coronabrasil.com/novosite

    O que vc acha? Obrigado pela ajuda.

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

  • 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…

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

  • 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!

  • Cara … você derrubou a árvore agora!!

    Valeu!