Impossibile decodificare il font scaricato, errore di analisi OTS: tag versione non valido + rotaie 4

Sto eseguendo la pre-compilazione di risorse ed eseguendo l'applicazione in modalità di produzione. Dopo la compilazione quando carico la mia pagina indice ho ricevuto i seguenti avvisi nella console di 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

Il problema è che non sta caricando le icone invece di quelle che mostrano i quadrati .

abbiamo usato i caratteri personalizzati e il codice è:

@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;
}

Non so cosa mi manchi. Ho cercato molto e ho anche provato la soluzione, ma non ho avuto alcun successo. Nella modalità di sviluppo funziona benissimo ma non so perché sia ​​quadrata nella modalità di produzione.

Ho avuto lo stesso errore esatto, e nel mio caso si è rivelato essere a causa di un percorso sbagliato per la @font-facedichiarazione. L'ispettore web non si è mai lamentato di un 404 poiché il server di sviluppo che stiamo utilizzando (live-server) è stato configurato per servire index.html predefinito su qualsiasi 404: s. Senza conoscere alcun dettaglio sulla configurazione, questo potrebbe essere un probabile colpevole.

Se in esecuzione su IIS come server e .net 4 / 4.5, potrebbero mancare le definizioni di estensione mime / file in Web.config - in questo modo:

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

Stavo avendo lo stesso 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 viene visualizzato questo messaggio di errore durante il tentativo di commit del font, si tratta di un problema con .gitattributes " warning: CRLF will be replaced by LF"

La soluzione per questo è l'aggiunta di qualsiasi tipo di carattere con cui stai riscontrando il problema in .gitattributes

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

Quindi ho eliminato i file di font corrotti e riapplicato i nuovi file di font e funziona alla grande.

provare

@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 rinominare il file in application.css.scss

Avevo un font corrotto, anche se sembrava caricarsi senza problemi e sotto Sorgenti in Chrome apparivano i devtools, il conteggio dei byte non era corretto, quindi l'ho scaricato di nuovo e l'ho risolto.

Basta indicare il formato su @ font-face come segue:

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

Ho avuto lo stesso problema e questo è dovuto al fatto che git tratta questi file come testo. Pertanto, durante il checkout dei file negli agenti di compilazione, il binario non è stato mantenuto.

Aggiungi questo al tuo .gitattributesfile e prova.

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

Durante l'utilizzo angular-cli, questo è ciò che funziona per me:

<?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>

Stavo ottenendo i seguenti errori:

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

che è stato corretto dopo aver scaricato il file non elaborato direttamente da:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Il problema era che si era verificato un errore proxy durante il download del file (conteneva il messaggio di errore HTML).

Vai all'indirizzo sotto su GitHub e scarica ciascuno dei file FontAwesome.

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

... ma invece di fare clic con il pulsante destro del mouse e salvare il collegamento come, fare clic su ciascuno dei file e utilizzare il pulsante "Download" per salvarli.

Ho scoperto che salvando il link scaricato una pagina HTML e non il file binario FontAwesome stesso.

Una volta che avevo tutti i binari ha funzionato per me.

Il mio problema era che stavo dichiarando due caratteri e scss sembra aspettarsi che tu dichiari il nome del carattere.

dopo il @font-face{} tuo devi dichiarare $my-font: "OpenSans3.0 or whatever";

e questo per ogni tipo di carattere.

:-)

Per gli utenti di angular -cli e webpack sospettavo che ci fosse qualche problema durante l'importazione dei caratteri nel file css, quindi fornisci anche la posizione dell'URL codificata con virgolette singole come segue:

@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;
}

Questo post potrebbe essere vecchio, ma questa è la soluzione che ha funzionato per me.

Ho avuto lo stesso problema.

L'aggiunta della versione del font (ad es. ?v=1.101) All'URL del font dovrebbe fare il trucco;)

@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 */
}

Cliccando (tasto destro del mouse) sulla versione TTF del font e selezionando "Ottieni informazioni" (Mac OSX) "Proprietà" (Windows) nel menu contestuale dovrebbe essere sufficiente per accedere alla versione del font.

Se stai utilizzando Chrome, prova ad aggiungere una versione opentype (OTF) del carattere come mostrato di seguito:

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

Saluti!

Se usi bootstrap, aggiorna il bootstrap.min.cssfile css ( ) e i file di font bootstrap . Ho risolto il mio problema con questa soluzione.

Sto usando ASP.NET con IIS e risulta che avevo solo bisogno di aggiungere il tipo MIME a IIS: '.woff2' / 'application / font-woff'

Dopo aver provato molti altri approcci e molte reinstallazioni e controlli, ho appena risolto il problema cancellando i dati di navigazione da Chrome (immagini e file memorizzati nella cache) e quindi aggiornando la pagina.

Ho avuto lo stesso problema quando ho aperto e salvato .woffe. woff2file tramite Sublime Text con EditorConfigopzione end_of_line = lf. Ho appena copiato i file nella cartella dei caratteri senza aprirli in Sublime e il problema è stato risolto.

Se le altre risposte non hanno funzionato, prova:

1. controlla il file .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. svuota la cache del server

3. svuota la cache del browser e ricarica

Controlla il file css del tuo font. (fontawesome.css / fontawesome.min.css) , vedrai così:

@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
}

vedrai il tag della versione dopo il nome dell'estensione del file del tuo carattere . Piace:

-v = 4.6.3

Devi solo rimuovere questo tag dal tuo file css. Dopo aver rimosso questo, devi andare alla cartella dei caratteri e vedrai:

E, forma questi file di font, devi solo rimuovere il tag di versione -v = 4.6.3 dal nome del file.

Quindi, il problema verrà risolto.

nel caso questo sia rilevante per qualcuno. Ho avuto lo stesso errore esatto usando ASP.NET e C # in Visual Studio. Quando ho avviato l'app da Visual Studio ha funzionato, ma ho riscontrato questo problema. Nel frattempo, si è scoperto che il percorso del mio progetto conteneva il carattere "#" (c: \ C # \ testapplication). Questo sembra confondere IIS Express (forse anche IIS) e causa questo problema. Suppongo che "#" sia un carattere riservato da qualche parte in ASP.NET o sotto. Cambiare il percorso ha aiutato e ora funziona come previsto.

Saluti Christof

Ciò che mi ha aiutato è stato che ho cambiato l'ordine. Il file .eot viene caricato per primo, ma il mio errore è stato nel caricamento di .eot. Così ho abbandonato .eot come primo src per woff2 e l'errore è scomparso.

Quindi il codice è ora:

@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;
}

Ed è stato:

@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";

Stavo avendo lo stesso problema, questo ha funzionato per me https://github.com/webpack/webpack/issues/1468