Falha ao decodificar a fonte baixada, erro de análise do OTS: tag de versão inválida + trilhos 4

Estou fazendo a pré-compilação dos ativos e executando o aplicativo no modo de produção. Após a compilação, quando carrego a minha página de índice, recebi os seguintes avisos no console do chrome:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

A questão é não carregar ícones, e sim mostrar quadrados .

usamos as fontes personalizadas e o código é:

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

Não sei o que está faltando no meu fim. Eu pesquisei muito e também tentei a solução, mas não obtive nenhum sucesso. No modo de desenvolvimento, está funcionando bem, mas não sei por que está aparecendo no modo de produção.

Eu recebi exatamente o mesmo erro e, no meu caso, acabou por ser um caminho errado para a @font-facedeclaração. O inspetor da Web nunca reclamou do 404, pois o servidor de desenvolvimento que estamos usando (live-server) foi configurado para exibir o index.html padrão em qualquer 404: s. Sem conhecer detalhes sobre sua configuração, isso pode ser um provável culpado.

Se estiver executando no IIS como servidor e .net 4 / 4.5, pode estar faltando definições de extensão mime / file no Web.config - desta forma:

<system.webServer>
	<staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Eu estava tendo o mesmo problema., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

Se você recebeu essa mensagem de erro ao tentar confirmar sua fonte, é um problema com .gitattributes "warning: CRLF will be replaced by LF "

A solução para isso é adicionar a fonte com a qual você está tendo problemas em .gitattributes

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Em seguida, apaguei os arquivos de fonte corrompidos, reapliquei os novos arquivos de fonte e está funcionando muito bem.

experimentar

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

e renomeie seu arquivo para application.css.scss

Eu tinha uma fonte corrompida, embora parecesse carregar sem problemas e, em Fontes no Chrome, os devtools pareciam ser exibidos, a contagem de bytes não estava correta, então fiz o download novamente e a solução foi resolvida.

Basta indicar o formato em @ font-face da seguinte forma:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

Eu tive o mesmo problema e isso foi por causa do git tratar esses arquivos como texto. Portanto, ao verificar os arquivos nos agentes de construção, o binário não foi mantido.

Adicione isso ao seu .gitattributesarquivo e tente.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

Ao usar angular-cli, é isso que funciona para mim:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Eu estava recebendo os seguintes erros:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

que foi corrigido após o download do arquivo bruto diretamente de:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

O problema era que havia um erro de proxy ao baixar o arquivo (ele continha a mensagem de erro HTML).

Vá para o endereço abaixo no GitHub e faça o download de cada um dos arquivos FontAwesome.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... mas, em vez de clicar com o botão direito e salvar o link como, clique em cada um dos arquivos e use o botão 'Download' para salvá-los.

Eu descobri que salvar o link como baixado uma página HTML e não o próprio arquivo binário do FontAwesome.

Uma vez que eu tinha todos os binários, funcionou para mim.

Meu problema foi que eu estava declarando duas fontes, e o scss parece esperar que você declare o nome da fonte.

após o seu, @font-face{} você deve declarar $my-font: "OpenSans3.0 or whatever";

e isso para cada fonte.

:-)

Para angular-cli usuários de e webpack , suspeitei de algum problema ao importar as fontes no arquivo css. Por isso, forneça também o local da URL codificado com aspas simples, como a seguir -

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Este post pode ser antigo, mas esta é a solução que funcionou para mim.

Eu tive o mesmo problema.

Adicionar a versão da fonte (por exemplo ?v=1.101) aos URLs da fonte deve ser suficiente;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Clicar (clicar com o botão direito do mouse) na versão TTF da fonte e selecionar "Obter informações" (Mac OSX) "Propriedades" (Windows) no menu de contexto deve ser suficiente para acessar a versão da fonte.

Se você estiver usando o Chrome, tente adicionar uma versão opentype (OTF) da sua fonte, como mostrado abaixo:

    ...
     url('icomoon.otf') format('opentype'),
    ...

Felicidades!

Se você usar o bootstrap, atualize o bootstrap.min.cssarquivo bootstrap css ( ) e os arquivos de fontes. Corrigi o meu problema com esta solução.

Estou usando o ASP.NET com o IIS e só preciso adicionar o tipo MIME ao IIS: '.woff2' / 'application / font-woff'

Depois de tentar muitas outras abordagens, e muitas reinstalações e verificações, corrigi o problema limpando os dados de navegação do Chrome (imagens e arquivos em cache) e atualizando a página.

Eu tive o mesmo problema quando abri e salvei .woffe. woff2arquivos através de texto sublime com EditorConfigopção end_of_line = lf. Acabei de copiar os arquivos para a pasta da fonte sem abri-los no Sublime e o problema foi resolvido.

Se outras respostas não funcionarem, tente:

1. verifique o arquivo .htaccess

   # Fonts
# Add correct content-type for fonts
   

   AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
   

2. limpar cache do servidor

3. limpar cache do navegador e recarregar

Verifique o arquivo css da sua fonte. (fontawesome.css / fontawesome.min.css) , você verá assim:

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

você verá a tag de versão após o nome da extensão do arquivo da fonte . Gostar:

-v = 4.6.3

Você só precisa remover essa tag do seu arquivo css. Depois de remover isso, você precisará ir para a pasta de fontes e verá:

E, do formulário desses arquivos de fonte, você só precisa remover a tag da versão -v = 4.6.3 do nome do arquivo.

Então, o problema será alterado.

caso isso seja relevante para alguém. Eu recebi exatamente o mesmo erro usando o ASP.NET e C # no Visual studio. Quando iniciei o aplicativo no estúdio visual, ele funcionou, mas eu consegui esse problema. Enquanto isso, o caminho para o meu projeto continha o caractere "#" (c: \ C # \ testapplication). Isso parece confundir o IIS Express (talvez também o IIS) e causa esse problema. Eu acho que "#" é um caractere reservado em algum lugar no ASP.NET ou abaixo. Mudar o caminho ajudou e agora funciona como esperado.

Cumprimentos Christof

O que me ajudou foi que mudei a ordem. O .eot get é carregado primeiro, mas meu erro foi carregar o .eot. Então, abandonei o .eot como o primeiro src do woff2 e o erro desapareceu.

Então, o código é agora:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

E é foi:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

Eu estava tendo o mesmo problema, isso funcionou para mim https://github.com/webpack/webpack/issues/1468