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

194

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?

Kaushik Gopal
fonte
2
Estou enfrentando esse problema exato com as diretivas e fontes geradas pelo FontSquirrel neste momento.
Jason
para fins de teste, você pode tentar adicionar as declarações @ font-face ao seu html entre as <style>tags e verificar se você tem o mesmo problema?
Chris_O
adicionando uma única vírgula pode resolver esta questão também, como: url ( 'Sans-serif') formato ( 'woff')
Farzan Balkani

Respostas:

234

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

Manuel
fonte
Se você não estiver trabalhando localmente, isso provavelmente não resolverá isso, mas você pode usar caminhos baseados em raiz em um site ao vivo de qualquer maneira, ou seja, "/ resources / font" em vez de relativos, como "../ font ", mas eu não sei sobre o Tumblr: se você pode fornecer o URL do site, posso dar uma olhada.
Manuel
A declaração da fonte funciona bem no Chrome, Safari e até no IE6 ... mas não no Firefox.
Jason
3
Ah, você está falando sobre o famoso problema de domínio cruzado: você pode usar sua fonte em uma codificação base64 ou pedir ao Tumblr para adicionar um cabeçalho adicional "Acesso-controle-permitir-origem" ao servir fontes.
Manuel
Então, quão ridiculamente rigorosa é a política de domínio cruzado do Firefox? Assim, a CDN e o site compartilham o mesmo domínio, apenas subdomínios diferentes.
Jason
1
@jason, a codificação confusa de 64 bits também não funciona? Funcionou para mim.
Kaushik Gopal
42

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
alademann
fonte
Trabalhou para mim também. Obrigado zoulodi!
James James
Trabalhe para mim como um encanto! Obrigado
Moxet Jan
1
Fiz o truque para mim também. Eu tive que adicionar o woff2 também: AddType font / woff2 .woff2
hdomos
17

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");
israelense
fonte
3
Colocar um local('name')na font-facedeclaração significa apenas "tentar carregar a fonte 'nome' no computador do usuário. Se não for encontrado, carregue a fonte da web". (consulte os documentos MDN ). Ainda bem, feliz que funcionou para você! :)
henry
4
Funcionou "Para você" porque você tinha a fonte instalada no seu computador. Outros usuários não o verão. Você consertou apenas para você.
Hugo Delsing
4

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.

ruyadorno
fonte
4

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.

tarquinwinot
fonte
4

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");
}
Otaviano Vladu
fonte
3

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

davus
fonte
3

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.

Pierre
fonte
2
os comentários sobre a solução selecionada mencionam a solução de codificação base64.
Kaushik Gopal
@KaushikGopal Acho que a resposta deve ter sido editada depois que eu postei isso.
6126 Pierre
3

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.

niall.campbell
fonte
ISTO. O MyFonts.com cospe seus arquivos de fonte nomeados dessa maneira e resulta na renderização do Firefox 35 de todos os tipos e formas bizarras. Renomear a fonte resolveu o problema.
coreyward
2

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.

Casey
fonte
Na verdade, você não deve usar a API da fonte do Google para isso. Há um problema no Firefox que impede que as variantes de fonte (itálico, negrito etc.) sejam usadas se você tiver a fonte instalada localmente. A única maneira de contornar isso que encontrei é nerf da declaração src local com o smiley (é claro, qualquer personagem estranho faria, é tão ... feliz).
Jason
Aqui está um link para o relatório de erros: code.google.com/p/googlefontdirectory/issues/detail?id=13
jason
2

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

Jason
fonte
Não sabia que Paul, eu inventei um novo método de marcador, terá que tentar este e ver se ele resolve meus problemas de fonte da FF.
Kaushik Gopal
[Atualização: Embora útil, ele não resolve o problema] .Eu fui apontado para a solução certa.
Kaushik Gopal
1

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.

David Baron
fonte
Hmm .. sim David, parece que o estou executando localmente, mas anteriormente eu tinha um subdiretório dentro do mesmo diretório. Portanto, meu type.css está na pasta raiz e no mesmo local está a pasta de fontes. então type.css e a pasta da fonte estão no mesmo diretório. Por segurança, também tentei removê-lo do diretório e colocar diretamente as fontes. Ainda não funciona no Firefox.
Kaushik Gopal
Agora estou começando a achar que é um dos dois: 1) algo errado na minha codificação; se alguém encontrar algo acima do código, seja gentil ao apontar. 2) O FF não trata bem a @ font-face e várias importações de arquivos? Eu uso main.css, que inturn importa @import type.css, que por sua vez tem o link da pasta para as fontes? Alguma gente leve? Btw, obrigado pela captura de peso da fonte @David!
Kaushik Gopal
O Firefox lida com várias importações muito bem. Qual versão você está usando? Depure o código usando o FireBug; use o processo de eliminação. Trabalhar localmente apresenta problemas que podem ser eliminados remotamente. É assim que você depura!
Casey
"Arquivos em diretórios diferentes são considerados domínios diferentes para regras entre domínios" - não, não são.
Mike Chamberlain
1

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.

bort
fonte
1

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.

WebFixItMan
fonte
1

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

Ganesh Garad
fonte
0

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!

ipalaus
fonte
1
Eu duvido que seria 404'ing em apenas um navegador e não em outros.
Jason
@jason Um navegador pode usar um tipo de arquivo diferente de outro. :)
ipalaus 20/09/2010
Bem, nos casos em que deparei com esse problema, posso dizer 100% que o painel de rede do Firebug mostra o carregamento da fonte com êxito.
Jason
0

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";
}
rossisdead
fonte
0

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.

SKWebDev
fonte
0

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/

arri
fonte
0

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; }
CR41G14
fonte
0

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!

Aleksandar
fonte
0

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.

theva
fonte
0

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
Simplans
fonte
0

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.

amir mola
fonte
-2

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

rnaud
fonte
Obrigado rnaud, eu realmente utilizei fontsquirrel para o acima exposto :). Apenas reformatado com guias e espaços para um formato legível.
Kaushik Gopal
Você nunca usou o SVG na declaração da fonte, mas usa o Font Squirrel? Então você usou o SVG na declaração da fonte.
Jason
1
@jason: Você pode optar por não usar o SVG com o Font Squirrel.
Rossisdead 13/09/10
-2

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.

Nehbur
fonte
-2

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

mikołaj
fonte