Échec du décodage de la police téléchargée, erreur d'analyse OTS: balise de version non valide + rails 4

Je suis en train de pré-compiler les actifs et d'exécuter l'application en mode production. Après la compilation, lorsque je charge ma page d'index, j'ai reçu les avertissements suivants dans la console 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

Le problème est que les icônes ne se chargent pas au lieu de montrer des carrés .

nous avons utilisé les polices personnalisées et le code est:

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

Je ne sais pas ce qui manque à ma fin. J'ai beaucoup cherché et essayé une solution, mais je n'ai pas obtenu de succès.

J'ai eu exactement la même erreur, et dans mon cas, cela s'est avéré être dû à un mauvais chemin pour la @font-facedéclaration. L'inspecteur Web ne s'est jamais plaint d'un 404 puisque le serveur de développement que nous utilisons (live-server) a été configuré pour servir le fichier index.html par défaut sur n'importe quel 404: s. Sans connaître les détails de votre configuration, cela pourrait être un coupable probable.

S'il est exécuté sur IIS en tant que serveur et .net 4 / 4.5, il se peut qu'il manque des définitions d'extension mime / fichier dans Web.config - comme ceci:

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

J'avais le même problème., 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

Si vous recevez ce message d'erreur en essayant de valider votre police, il s'agit d'un problème avec .gitattributes " warning: CRLF will be replaced by LF"

La solution consiste à ajouter la police avec laquelle vous rencontrez le problème dans .gitattributes

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

Ensuite, j'ai supprimé les fichiers de polices corrompus et réappliqué les nouveaux fichiers de polices et fonctionne très bien.

essayer

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

et renommez votre fichier en application.css.scss

J'avais une police corrompue, même si elle semblait se charger sans problème et que sous Sources dans Chrome, les outils de développement semblaient s'afficher, le nombre d'octets n'était pas correct, j'ai donc téléchargé à nouveau et cela l'a résolu.

Indiquez simplement le format à @ font-face comme suit:

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

J'ai eu le même problème et c'était à cause du git traitant ces fichiers comme du texte. Ainsi, lors de l'extraction des fichiers dans les agents de build, le binaire n'était pas maintenu.

Ajoutez ceci à votre .gitattributesfichier et essayez.

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

Lors de l'utilisation angular-cli, voici ce qui fonctionne pour moi:

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

J'obtenais les erreurs suivantes:

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

qui a été corrigé après le téléchargement du fichier brut directement à partir de:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Le problème était qu'il y avait une erreur de proxy lors du téléchargement du fichier (il contenait le message d'erreur HTML).

Accédez à l'adresse ci-dessous sur GitHub et téléchargez chacun des fichiers FontAwesome.

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

... mais au lieu de cliquer avec le bouton droit et d'enregistrer le lien sous, cliquez sur chacun des fichiers et utilisez le bouton «Télécharger» pour les enregistrer.

J'ai trouvé que l'enregistrement du lien était téléchargé sur une page HTML et non sur le fichier binaire FontAwesome lui-même.

Une fois que j'ai eu tous les binaires, cela a fonctionné pour moi.

Mon problème était que je déclarais deux polices, et scss semble s'attendre à ce que vous déclariez le nom de la police.

après votre @font-face{} vous devez déclarer $my-font: "OpenSans3.0 or whatever";

et ceci pour chaque font-face.

:-)

Pour les utilisateurs d' angular-cli et de webpack , je soupçonnais qu'il y avait un problème lors de l'importation des polices dans un fichier css, veuillez donc également fournir l'emplacement de l'url codé avec des guillemets simples comme suit -

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

Ce post est peut-être vieux, mais c'est la solution qui a fonctionné pour moi.

J'ai eu le même problème.

L'ajout de la version de la police (par exemple ?v=1.101) aux URL de police devrait faire l'affaire;)

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

Cliquer (clic droit de la souris) sur la version TTF de la police et sélectionner «Obtenir des informations» (Mac OSX) «Propriétés» (Windows) dans le menu contextuel devrait suffire pour accéder à la version de la police.

Si vous utilisez Chrome, essayez d'ajouter une version opentype (OTF) de votre police comme indiqué ci-dessous:

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

À votre santé!

Si vous utilisez bootstrap, mettez à jour le bootstrap.min.cssfichier bootstrap css ( ) et les fichiers de polices. J'ai résolu mon problème avec cette solution.

J'utilise ASP.NET avec IIS et il s'avère que j'avais juste besoin d'ajouter le type MIME à IIS: '.woff2' / 'application / font-woff'

Après avoir essayé de nombreuses autres approches et de nombreuses réinstallations et vérifications, je viens de résoudre le problème en supprimant les données de navigation de Chrome (images et fichiers en cache), puis en actualisant la page.

J'ai eu le même problème lorsque j'ai ouvert et enregistré .woffet. woff2fichiers via Sublime Text avec EditorConfigoption end_of_line = lf. Je viens de copier des fichiers dans le dossier de polices sans les ouvrir dans Sublime et le problème a été résolu.

Si les autres réponses ne fonctionnent pas, essayez:

1. vérifier le fichier .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. effacer le cache du serveur

3. vider le cache du navigateur et recharger

Vérifiez le fichier css de votre police. (fontawesome.css / fontawesome.min.css) , vous verrez comme ceci:

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

vous verrez la balise de version après le nom d'extension de fichier de votre police . Comme:

-v = 4,6,3

Il vous suffit de supprimer cette balise de votre fichier css. Après avoir supprimé cela, vous devez aller dans votre dossier de polices, et vous verrez:

Et, dans les fichiers de ces polices, il vous suffit de supprimer la balise de version -v = 4.6.3 du nom de fichier.

Ensuite, le problème sera réglé.

juste au cas où cela serait pertinent pour quelqu'un. J'ai eu exactement la même erreur en utilisant ASP.NET et C # dans Visual Studio. Lorsque j'ai démarré l'application depuis le studio visuel, cela fonctionnait, mais j'ai eu ce problème. En attendant, il s'est avéré que le chemin d'accès à mon projet contenait le caractère «#» (c: \ C # \ testapplication). Cela semble confondre IIS Express (peut-être aussi IIS) et provoque ce problème. Je suppose que "#" est un caractère réservé quelque part dans ASP.NET ou en dessous. Changer le chemin a aidé et maintenant cela fonctionne comme prévu.

Cordialement Christof

Ce qui m'a aidé, c'est que j'ai changé l'ordre. Le .eot est chargé en premier, mais mon erreur est sur le chargement du .eot. J'ai donc abandonné le .eot comme premier src pour woff2 et l'erreur a disparu.

Donc, le code est maintenant:

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

Et c'était:

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

J'avais le même problème, cela a fonctionné pour moi https://github.com/webpack/webpack/issues/1468