CSS @ font-face não funciona no Firefox, mas no Chrome e IE

O código a seguir funciona no Google Chrome beta e no IE 7. No entanto, o Firefox parece ter um problema com isso. Suspeito que seja um problema de como meus arquivos CSS estão incluídos, porque sei que o Firefox não é muito amigável sobre importações entre domínios.

Mas tudo isso é apenas HTML estático e não há questão de domínio cruzado.

No landing-page.html, faço uma importação de CSS da seguinte forma:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

Dentro do main.css, tenho outras importações como:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

e dentro do type.css, tenho as seguintes declarações:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

Eu tenho um diretório chamado "fonte" no mesmo local que type.css. Este diretório de fontes contém todos os arquivos woff / ttf / svg etc.

Estou perplexo com este. Funciona no Chrome e no IE, mas não no Firefox . Como isso é possível? o que estou perdendo?

EXECUTANDO LOCALMENTE O SITE ( file:///)

O Firefox vem com uma file:///política muito rigorosa de "origem da uri de arquivo" ( ) por padrão: para que ela se comporte da mesma forma que outros navegadores, acesse about:config, filtre fileurie alterne entre as seguintes preferências:

security.fileuri.strict_origin_policy

Defina-o como false e você poderá carregar recursos de fonte local em diferentes níveis de caminho.

SITE PUBLICADO

Conforme meu comentário abaixo, e você está enfrentando esse problema após a implantação do site, tente adicionar um cabeçalho adicional para verificar se o problema se configura como um problema entre domínios: não deve, pois você está especificando caminhos relativos, mas eu tentaria mesmo assim: no seu arquivo .htaccess, especifique que você deseja enviar um cabeçalho adicional para cada arquivo .ttf / .otf / .eot que está sendo solicitado:

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

Francamente, eu não esperaria que isso fizesse alguma diferença, mas é tão simples que vale a pena tentar: tente usar a codificação base64 para o tipo de fonte, feio, mas pode funcionar também.

Uma boa recapitulação está disponível aqui

Além de adicionar o seguinte ao seu .htaccess: (obrigado @Manuel)

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

Convém tentar adicionar explicitamente os tipos mime da webfont ao arquivo .htaccess ... assim:

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

No final, meu arquivo .htaccess é parecido com este (para a seção que permite que as páginas da web funcionem em todos os navegadores)

# BEGIN REQUIRED FOR WEBFONTS

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>

# END REQUIRED FOR WEBFONTS

Eu também tive esse problema. Encontrei a resposta aqui: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Este é um exemplo da solução que funciona no firefox, você precisa adicionar esta linha à sua fonte css:

src: local(font name), url("font_name.ttf");

Vou deixar isso aqui porque meu colega de trabalho encontrou uma solução para um problema relacionado à "fonte-fonte que não funciona no Firefox, mas em qualquer outro lugar".

O problema era apenas o Firefox bagunçar a declaração da família de fontes, isso acabou corrigindo:

body{ font-family:"MyFont" !important; }

PS: Eu também estava usando html5boilerplate.

Eu estava tendo o mesmo problema. Verifique seu código para H1, H2 ou qualquer estilo que você esteja alvejando com a regra @ font-face. Descobri que estava faltando um coma depois que font-family: 'custom-font-family' Arial, Helvetica etcestava aparecendo bem em todos os navegadores, exceto no Firefox. Eu adicionei o coma e funcionou.

Eu tive exatamente o mesmo problema. Eu tive que criar uma nova pasta chamada "fontes" e colocá-la em wp_content. Posso acessá-lo no meu navegador como este http://www.example.com/wp-content/fonts/CANDY.otf

Anteriormente, a pasta de fontes estava no mesmo diretório do meu arquivo CSS e a @ font-face era assim:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Como mencionei acima, isso não estava funcionando no Firefox, mas apenas no Chrome. Agora está funcionando porque usei um caminho absoluto:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Eu tive exatamente esse problema executando o ff4 em um mac. Eu tinha um servidor de desenvolvimento local em execução e minha declaração @ font-face funcionou bem. Eu migrei para o live e o FF 'piscaria' o tipo correto no carregamento da primeira página, mas ao navegar mais fundo, o tipo de letra padronizado na folha de estilo do navegador.

Encontrei a solução ao adicionar a seguinte declaração ao .htaccess

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

encontrado via

Uma solução fácil que ninguém mencionou ainda é incorporar a fonte diretamente no arquivo css usando a codificação base64.

Se você estiver usando o fontsquirrel.com, no Gerador de kits com a face da fonte, escolha o modo especialista , role para baixo e selecione Codificação Base64 em Opções de CSS - o Font-Kit baixado estará pronto para ser plugado e reproduzido.

Isso também tem o benefício adicional de reduzir o tempo de carregamento da página, pois requer uma solicitação HTTP a menos.

Eu mencionaria que algumas fontes têm problemas no firefox se o nome do arquivo contiver caracteres específicos. Recentemente, encontrei um problema com a fonte 'Modulus' que tinha o nome de arquivo '237D7B_0_0'. A remoção dos sublinhados no nome do arquivo e a atualização do css para corresponder ao novo nome do arquivo resolveram esse problema. Outras fontes com caracteres semelhantes não têm esse problema, que é muito curioso ... provavelmente um bug no firefox. Eu recomendo manter nomes de arquivos apenas para caracteres alfanuméricos.

Para essa fonte em particular, você deve usar a API de fontes do Google:

http://code.google.com/webfonts/family?family=Droid+Sans

Se você ainda deseja usar o gerador de kit do FontSquirrel, use a opção Smiley hack para eliminar problemas de fonte local. Depois de gerar um kit, verifique se o demo.html gerado funciona no FireFox. Aposto que sim. Agora faça o upload para o seu servidor - aposto que também funciona lá, pois o FontSquirrel é incrível.

No entanto, se você quebrou o código do kit gerado ao integrá-lo ao seu projeto, use os métodos padrão de depuração - verifique se há 404 e vá linha por linha até encontrar o problema. O WOFF definitivamente deve funcionar no FF, então esse é um bom lugar para começar.

Por fim, se nada disso funcionar, atualize o FireFox. Eu escrevi tudo isso assumindo que você está usando as últimas; mas você não especificou em qual versão está fazendo o check-in, também pode ser seu problema.

Tente nerfing a declaração de fonte local em suas @font-facediretivas.

Há um bug conhecido no Firefox ou na API de fontes do Google que impede que as variantes de fontes sejam usadas se a fonte estiver instalada localmente e corresponde ao nome local definido:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Para nerf efetivamente a declaração local, apenas faça com que sua fonte local faça algumas bobagens. A convenção geralmente aceita para isso é usar o caractere smiley unicode ( "☺"). Por quê? Paul Irish tem uma ótima explicação em seu blog:

http://paulirish.com/2010/font-face-gotchas/#smiley

Você está testando isso em arquivos locais ou em um servidor Web? Arquivos em diretórios diferentes são considerados domínios diferentes para regras entre domínios; portanto, se você estiver testando localmente, poderá estar enfrentando restrições entre domínios.

Caso contrário, provavelmente seria útil apontar para uma URL onde o problema ocorre.

Além disso, sugiro olhar para o console de erros do Firefox para ver se foram relatados erros de sintaxe CSS ou outros erros.

Além disso, eu observaria que você provavelmente deseja o peso da fonte: negrito na segunda regra @ font-face.

O uso de uma regra de permissão de origem de controle de acesso .htaccess não funcionou para mim quando me deparei com esse problema.

Em vez disso, no IIS no web.config, insira o bloco system.webServer mostrado abaixo.

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

Isso funcionou como um encanto para mim. Se você precisar restringir o acesso a um domínio específico, substitua o * pelo domínio.

Eu estava tendo o mesmo problema ao obter uma fonte para exibir corretamente no Firefox. Aqui está o que eu achei para trabalhar para mim. Adicione uma barra antes do diretório que contém a fonte no atributo url. Aqui estão as minhas versões anteriores e posteriores:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

notou a barra antes de 'fontes' no URL? Isso indica ao navegador para iniciar no diretório raiz e acessar o recurso. Pelo menos para mim - problema resolvido.

Se você está tentando importar fontes externas, enfrenta um dos problemas mais comuns do Firefox e de outro navegador. Algum tempo, sua fonte está funcionando bem no Google Chrome ou em outro navegador, mas não em todos os navegadores.

Há muitas razões para esse tipo de erro. Uma das maiores razões por trás desse problema é a fonte predefinida anterior. Você precisa adicionar! Keyword importante após o final de cada linha de código CSS, como abaixo:

Exemplo:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Descrição: Digite o código acima no seu arquivo CSS ou código aqui. No exemplo acima, substitua "Hacen Saudi Arabia" pela sua família de fontes e substitua o URL conforme o diretório da fonte.

Se você digitar! Important no seu navegador de código css, foque automaticamente nesta seção e substitua a propriedade usada anteriormente. Para obter mais detalhes, visite: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Você pode verificar com o firebug se conseguir algum 404? Tive problemas no passe e descobri que a extensão era a mesma, mas o linux file.ttf é diferente do file.TTF ... e funcionava com todos os navegadores, exceto o Firefox.

Gostaria que ajude!

Esse é um problema de como você configura os caminhos da fonte. Como você não iniciou o caminho com um "/", o Firefox tentará encontrar as fontes com base no caminho em que a folha de estilo está. Então, basicamente, o Firefox está procurando sua fonte no diretório "root / css / font" em vez de o diretório "root / font". Você pode corrigir isso facilmente movendo a pasta da fonte para a pasta css ou adicionando um / ao início dos caminhos da fonte.

Experimente o seguinte:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Tente isso ....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Eu tive um problema parecido. A página de demonstração fontsquirel estava funcionando no FF, mas não na minha própria página, embora todos os arquivos fossem do mesmo domínio!

Aconteceu que eu estava vinculando minha folha de estilo a um URL absoluto (http://example.com/style.css), então a FF achou que vinha de um domínio diferente. Alterar meu link da folha de estilo href para /style.css corrigiu as coisas para mim.

Talvez o seu problema seja um problema de nomeação, especificamente no que diz respeito ao uso (ou não) de espaços e hífens.

Eu estava tendo um problema semelhante, que eu pensei que tinha corrigido, colocando o opcional aspas (') em torno de fontes / nomes de família, mas que na verdade corrigia implicitamente um problema de nomeação.

Não estou totalmente atualizado sobre a especificação CSS, e há (pelo menos para mim) alguma ambiguidade na maneira como diferentes clientes interpretam as especificações. Além disso, também parece relacionado a convenções de nomenclatura PostScript, mas corrija-me se estiver errado!

De qualquer forma, como eu o entendo agora, sua declaração está usando uma mistura de dois possíveis sabores distintos.

@font-face {
  font-family: "DroidSerif Regular";

Se você considerar Droid o sobrenome real, do qual Sans e Serif são membros, assim como, por exemplo, seus filhos Sans Regular ou Serif Bold , use espaços em todos os lugares para identificar identificadores, ou remova espaços e use CamelCasing para o familyName e hífens para sub-identificadores.

Aplicado à sua declaração, seria algo como isto:

@font-face {
  font-family: "Droid Serif Regular";

OU

@font-face {
  font-family: DroidSerif-Regular;

Eu acho que ambos devem ser perfeitamente legais, com ou sem as aspas, mas tive um sucesso misto com isso entre vários clientes. Talvez, um dia, eu tenha algum tempo para descobrir os detalhes sobre esse / esses isseu / s.

Eu achei este artigo útil para entender alguns dos aspectos envolvidos: http://mathiasbynens.be/notes/unquoted-font-family

Este artigo contém mais detalhes especificamente sobre o PostScript e alguns links para um PDF de especificação da Adobe: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Não é necessário mexer nas configurações; remova as aspas e os espaços da família de fontes:

isto

body {font-family: "DroidSerif Regular", serif; }

torna-se isso

body {font-family: DroidSerifRegular, serif; }

No meu caso, resolvi um problema ao inserir código de estilo de fonte

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty no cabeçalho da sua página index.html ou php, na tag style. Funciona para mim!

Por esse motivo, este é um dos principais resultados do Google para esse problema. Gostaria de adicionar o que resolveu esse problema para mim:

Eu tive que remover o formato (opentype) do src da fonte, então funcionou no Firefox também. Funcionou bem no Chrome e Safari antes disso.

Pode não ser por causa do seu código, é por causa da configuração do Firefox.

Tente isso de Tool bar ocidental para Unicode

View > Text Encoding > Unicode

Eu tive o mesmo problema e o resolvi adicionando meta ao conteúdo:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Isso acontece no Firefox e Edge se você tiver textos Unicode no seu html.

Não sei como você criou a sintaxe, pois nunca usei svg na declaração da fonte, mas o Font Squirel tem uma ferramenta muito boa para criar uma sintaxe à prova de bala à frente da fonte a partir de apenas uma fonte.

http://www.fontsquirrel.com/fontface/generator

Também pode ser o uso da URL no caminho da tag font-face. Se você usa "http://domain.com", ele não funciona no Firefox, para mim, a alteração para "http://www.domain.com" funcionou.

Meu problema era que o Windows nomeou a fonte 'font.TTF' e o firefox esperado 'font.ttf'. Vi que, depois de abrir meu projeto no linux, renomeei a fonte para propper name e tudo funciona