Fontes de icons não carregando no IE11

Estamos usando o icomoon para nossas fonts de icons, e eles funcionam bem no Chrome e no Firefox, mas não são exibidos no IE11 … Às vezes. Parece funcionar no primeiro carregamento da página, mas não nos carregamentos de página subsequentes. Limpar o cache não parece redefini-lo. Esse problema pode estar presente em outras versões do IE, agora estamos apenas focando no IE11.

Aqui está o nosso @ font-face:

@font-face { font-family: 'icon'; src:url('fonts/icon.eot?-3q3vo5'); src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'), url('fonts/icon.woff?-3q3vo5') format('woff'), url('fonts/icon.ttf?-3q3vo5') format('truetype'), url('fonts/icon.svg?-3q3vo5#rezku') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-alphabet:before { content: "\e600"; } /* etc etc etc */ 

Mas aqui é onde fica esquisito. Olhando para as ferramentas do desenvolvedor, uma solicitação HTTP para as fonts está sendo enviada, mas apenas algumas centenas de bytes estão sendo recebidas (provavelmente apenas os headers).

Painel de rede

Mas a resposta HTTP lista o tamanho do conteúdo corretamente como vários kilobytes.

Cabeçalhos de resposta

A guia “Corpo de resposta” diz apenas “Nenhum dado para visualizar”.

Você pode ver na captura de canvas do Painel de Rede que as Fontes do Google não estão se comportando assim.

Colar o URL na barra de localização faz com que o arquivo completo seja baixado.

Enfrentou um problema semelhante e, a partir da captura de canvas acima, a resposta tem um header de controle de cache de ‘no-store’. IE parece ter problemas com caching e fonts.

A remoção dos headers “Cache-Control: no-store” e “Pragma: no-cache” funcionou para que as fonts do ícone fossem exibidas novamente.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Depois de investigar o mesmo problema, e passando por várias soluções publicadas on-line, criei a seguinte lista de solução de problemas, que abrange a maioria das possíveis causas:

  1. Os downloads de fonts estão desabilitados no IE, em Opções da Internet / Segurança / Personalizar Transferências de Nível / Fonte ativadas / desativadas. Eles podem ser desativados pelo administrador da rede, caso em que você não poderá ver nem alterar essa configuração.
  2. Seus headers HTTP impedem que o IE armazene o arquivo de fonts localmente. Para corrigir, remova todos os headers Cache-Control: no-store, no-cache ou Pragma: no-cache , ou qualquer header Expires com uma data passada. Além disso, o header Vary tem seus truques no IE, se definido como algo diferente de Accept-Encoding , User-Agent , Host ou Accept-Language , o IE não armazenará nada em cache, a menos que um header ETAG também esteja presente. .
  3. Você não define os tipos MIME corretos para o download da fonte. Por exemplo, o Jetty 9 definirá por padrão Content-Type: text/plain para os tipos de fonts usuais ( eot, woff, woff2 ). Veja esta resposta para os tipos de conteúdo apropriados a serem usados.
  4. Certifique-se de usar display: block ou display: inline-block para o seu elemento icon.
  5. Por fim, certifique-se de consultar o guia de solução de problemas no FontAwesome.

Eu tive um problema semelhante e parece ser causado por IE ter dificuldade com determinadas configurações de display e position em combinação com iconfonts.

Normalmente, deve funcionar usando:

 element:before { display:block; position: absolute; ... your styles ... } 

Eu enfrentei um problema semelhante, mas com icons de fonts Bootstrap (Glyphicons). Você pode tentar se isso funciona:

(Geralmente no Windows 10) as configurações do IE-11 foram alteradas para não baixar fonts externas e usar apenas as fonts disponíveis no Windows. Este é o comportamento padrão.

No entanto, podemos alterar essa configuração no IE para permitir o download de fonts externas. A seguir estão as etapas a serem tomadas no IE- Vá para: Configurações >> Opções da Internet >> Segurança insira a descrição da imagem aqui

Clique em “Internet” (ou qualquer zona que você esteja usando) >> “Nível personalizado…”
Avançar nas ‘configurações de segurança’ – Ativar ‘Download de Fontes’. Por padrão, seria desativado. insira a descrição da imagem aqui

Recarregue a página

A syntax está correta, no entanto, pode haver um problema com a maneira como o conversor usado para converter de .tff para .eof. Veja este artigo para mais detalhes sobre este assunto em geral http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

Enquanto isso, você pode testar o problema usando uma fonte hospedada por fonts do Google. Digo isso porque o Google lida com a compatibilidade entre navegadores sem problemas. Se a fonte do Google funcionar, você sabe que é um problema com a maneira como sua fonte foi convertida e você precisa tentar outra. Pelo que entendi, o Font Squirrel é muito bom em gerar fonts compatíveis com cross browser. Espero que isso ajude. Boa sorte

Este é o problema: https://docs.microsoft.com/pt-br/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

Basicamente, a Microsoft está nos fazendo ter que voltar a usar folhas de sprite.

No meu caso, ele estava corrompido. Eu tinha gerado um novo (+ novos estilos .css) e resolvi o problema. Tente.

PS. Certifique-se de que você suporta o EOT para IE no @ font-face, por exemplo:

 @font-face { font-family: "fontName"; src:url("../../src/theme/fonts/fontName.eot"); src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"), url("../../src/theme/fonts/fontName.woff") format("woff"), url("../../src/theme/fonts/fontName.ttf") format("truetype"), url("../../src/theme/fonts/fontName.svg#fontName") format("svg"); font-weight: normal; font-style: normal; }