web-dev-qa-db-fra.com

Échec de la 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 des ressources et d’exécuter l’application en mode de production. Après la compilation, lorsque j'ai chargé la page d'index, des avertissements ont suivi 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 qu'il ne charge pas les icônes au lieu de voir ses carrés d'affichage.

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

@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 j'ai aussi essayé une solution, mais sans succès. En mode développement, il fonctionne bien, mais je ne sais pas pourquoi il est affiché en mode production.

cssasset-pipelineruby-on-rails-4.1custom-font
121
Deepti Kakade

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

129
Fredrik Frodlund

Si vous utilisez IIS en tant que serveur et .net 4/4.5, il se peut qu'il manque des définitions d'extension mime/file 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>
18
Squareman88

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 lié à .gitattributes "warning: CRLF will be replaced by LF"

La solution à cela 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 police corrompus et réappliqué les nouveaux fichiers de police et fonctionne très bien.

15
rshah

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

4
Yu-Shing Shen

J'avais une police corrompue, bien qu'elle semblait se charger sans problème et sous Sources dans Chrome, devtools semblait s'afficher, le nombre d'octets n'était pas correct, j'ai donc téléchargé à nouveau et résolu le problème.

3
LJT

J'avais le même problème et c'était à cause du git qui traitait ces fichiers comme du texte. Ainsi, lors de l'extraction des fichiers dans les agents de génération, le binaire n'a pas été maintenu.

Ajoutez ceci à votre fichier .gitattributes et essayez.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary
3
Abhijeet

Allez à 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 de la souris et d'enregistrer le lien sous, cliquez sur chacun des fichiers et utilisez le bouton 'Télécharger' pour les enregistrer.

J'ai constaté qu'en enregistrant le lien sous forme téléchargée une page HTML et non le fichier binaire de FontAwesome.

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

2
Robert Bolton

Lorsque vous utilisez 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>
2
Skorunka František

Je recevais 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).

2
DJDaveMark

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 each font-face.

:-)

1
Antoine

Pour les utilisateurs de angular-cli et webpack Je soupçonnais qu'il y avait un problème lors de l'importation des polices dans le fichier css. Merci d'indiquer également l'emplacement de l'URL 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 message est peut-être ancien, mais c’est la solution qui a fonctionné pour moi.

1
ip_x

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

0
Buitregool

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

0
user3125779

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

L'ajout de la version de la police (par exemple ?v=1.101) aux URL de la 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 */
}

En cliquant (clic droit) sur la version TTF de la police et en sélectionnant "Lire les informations" (Mac OSX), "Propriétés" (Windows) dans le menu contextuel devrait suffire à accéder à la version de la police.

0
Lefan

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

0
FRabbi

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é ceci, vous devez aller dans votre dossier de polices, et vous verrez: enter image description here

Et, formez les fichiers de cette police, il vous suffit de supprimer la balise de version - v = 4.6.3 du nom du fichier.

Ensuite, le problème sera résolu.

0
Prince Ahmed

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. effacer le cache du navigateur et recharger
0
Andrea Zangheri

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 effaçant les données de navigation de Chrome (images et fichiers en cache), puis en actualisant la page.

0
Andy Lorenz

J'utilise ASP.NET avec IIS et il s'avère que je devais simplement ajouter le type MIME à IIS: '.woff2'/'application/font-woff'

0
Jawid Hassim

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

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