web-dev-qa-db-fra.com

Impossible de décoder la police téléchargée

C’est une erreur que je reçois dans Chrome et, malheureusement, cela n’a pas donné beaucoup de résultats. La police elle-même apparaît correctement. Cependant, je reçois toujours cette erreur/avertissement. Plus précisément, c'est l'avertissement complet:

"Échec de la décodage de la police téléchargée: http: // localhost: 8000/app/fonts/Lato/ "

Mes CSS sont ceux-ci:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

Je ne comprends tout simplement pas. La police est appliquée correctement, mais l'avertissement est toujours présent. Essayer d'utiliser Sans-Serif fait que la police revienne à la police normale du navigateur, donc c'est peut-être cela, mais je ne suis pas sûr, et même après une recherche, je n'ai rien trouvé. Merci!

MODIFIER

Il existe différents fichiers de polices, tous de la même famille. J'essaie de tous les charger. Les fichiers de police sont .ttf. Je les charge depuis un dossier local et il y a plusieurs fichiers de polices, tels que Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf etc.

htmlcsshtml5fonts
99
Luís Ferreira

Dans la règle css, vous devez ajouter l'extension du fichier . Cet exemple avec le support le plus profond possible:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

MODIFIER:

"Echec de la décodage de la police téléchargée" signifie que la police est corrompue ou incomplète (métriques manquantes, tables nécessaires, noms des enregistrements, un million de choses possibles).

Parfois, ce problème est causé par la police elle-même. La police Google fournit la police correcte dont vous avez besoin, mais si vous avez besoin d'une police de caractères, utilisez Transfonter pour générer tous les formats de police.

Parfois, le client FTP qui a corrompu le fichier (pas dans ce cas car il se trouve sur un PC local). Assurez-vous de transférer le fichier en binaire et non en ASCII.

65
Germano Plebani

Changer de format ('woff') en format ('font-woff') m'aide à résoudre ce problème tout à l'heure.

Il suffit de changer un peu de Germano Plebani ici

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

S'il vous plaît vérifier si les sources de votre navigateur peuvent l'ouvrir et quel est le type

20
Fuad Husni

J'ai rencontré un problème similaire dans Visual Studio, dû à un chemin url() incorrect vers la police en question.

J'ai cessé de recevoir cette erreur après avoir changé (par exemple):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

pour ça:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");
15
alex

Assurez-vous que votre serveur envoie les fichiers de polices avec le droit mime/type.

J'ai récemment eu le même problème avec nginx car certains types de polices mime sont absents de son fichier Vanilla /etc/nginx/mime.types.

J'ai résolu le problème en ajoutant les types de mime manquants à l'emplacement où j'avais besoin d'eux, comme ceci:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include Vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

Vous pouvez également vérifier cela pour étendre le fichier mime.types dans nginx: étendre le fichier par défaut nginx mime.types

11
Matteo

Je devais ajouter type="text/css" à mon lien-tag. Je l'ai changé de:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

à:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

Après que j'ai changé, l'erreur a disparu.

7
nabjoern

Je viens d'avoir le même problème et résolu en changeant

src: url("Roboto-Medium-webfont.eot?#iefix")

à

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')
5
Christian Rauchenwald

Parfois, ce problème se produit lorsque vous téléchargez/chargez les polices en utilisant la mauvaise méthode FTP. Les polices doivent être FTP-ed en utilisant la méthode binaire, pas ASCII. (En fonction de votre humeur, cela peut sembler contre-intuitif, lol) . Si vous ftp les fichiers de polices en utilisant la méthode ASCII, vous pouvez obtenir ce message d'erreur. Si vous ftp vos fichiers avec une méthode 'auto' et que vous obtenez ce message d'erreur, essayez de forcer ftp avec la méthode binaire.

4
Giuseppe

Dans mon cas, cela a été causé par un fichier de chemin incorrect, dans .htaccess . Veuillez vérifier l'exactitude de votre chemin de fichier.

3
Ebrahim

Pour moi, cette erreur se produisait lorsque j'ai référencé une police Google à l'aide de https. Lorsque je suis passé à http, l'erreur a disparu. (et oui, j'ai essayé plusieurs fois pour confirmer que c'était la cause)

Alors j'ai changé:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

À:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);
3
Venryx

J'avais le même problème avec font awesome v4.4 et je l'ai résolu en supprimant le format woff2. Je recevais un avertissement dans Chrome uniquement.

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

Dans mon cas, cela était dû à la création d'un fichier de correctif SVN qui englobait l'ajout des fichiers de polices. Ainsi:

  1. Ajouter des fichiers de polices du système de fichiers local à un coffre subversionné
  2. Le coffre fonctionne comme prévu
  3. Créer un correctif SVN des modifications du tronc, pour inclure l'ajout de fichiers de polices
  4. Appliquer le correctif à une autre branche
  5. Les fichiers de polices sont ajoutés à la branche inférieure (et peuvent être validés), mais ils sont corrompus et génèrent une erreur dans OP.

La solution consistait à télécharger les fichiers de polices directement dans la branche à partir de mon système de fichiers local. Je suppose que cela est dû au fait que les fichiers de correctif SVN doivent tout convertir au format ASCII et ne conservent pas nécessairement les fichiers binaires pour les fichiers de polices. Mais ce n'est qu'une supposition.

1
MegaMatt

J'ai également eu le même problème mais j'ai résolu en ajoutant 'Content-Type': 'application/x-font-ttf' dans l'en-tête de la réponse pour tous les fichiers .ttf

1
usernaveen

Pour moi, l’erreur a été d’oublier de mettre FTP en mode binaire avant de télécharger les fichiers de polices.

Modifier

Vous pouvez tester cela en téléchargeant d'autres types de données binaires, telles que des images. S'ils ne s'affichent pas non plus, c'est peut-être votre problème.

1
Robert Gowland

pour moi c'était un problème avec les fichiers lfs qui n'ont pas été téléchargés

git lfs fetch --all

résolu le problème.

voir https://github.com/git-lfs/git-lfs/issues/325

0
Amor

Si vous utilisez Express, vous devez autoriser la diffusion de contenu statique en ajoutant quelque chose comme: Var server = express (); Server.use (express.static ('./ public')); // où public est le dossier racine de l'application, avec les polices qu'il contient, à n'importe quel niveau, c'est-à-dire public/fonts ou public/dist/fonts ... // Si vous utilisez connect, google pour une configuration similaire.

0
Cleophas Mashiri

S'il se trouve sur le serveur (pas dans localhost), essayez alors de télécharger les polices manuellement, car parfois le client FTP (par exemple, FileZilla) corrompt les fichiers et peut en être la cause. Pour moi, j'ai téléchargé manuellement en utilisant l'interface Cpanel.

0
Saidmamad

Dans mon cas, lors du téléchargement d'un modèle, les fichiers de polices étaient simplement des fichiers vides. Probablement un problème avec le téléchargement. Chrome a donné cette erreur générique à propos de. Je pensais au début que la solution consistant à passer de woff à font-woff la résolvait, mais cela ne faisait que laisser Chrome ignorer les polices. Ma solution consistait à rechercher les polices une par une et à les télécharger/les remplacer.

0
André C. Andersen

J'utilise .Net Framework 4.5/IIS 7

Pour résoudre ce problème, j'ai mis le fichier Web.config dans un dossier contenant le fichier de polices.

Contenu de Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>
0
Андрей Приймак

Dans mon cas - en utilisant React avec Gatsby - le problème a été résolu en revérifiant tous mes chemins. J'utilisais React/Gatsby avec Sass et les fichiers source de Gatsby cherchaient les polices à un endroit différent de celui des fichiers compilés. Une fois que j'ai dupliqué les fichiers dans chaque chemin, ce problème avait disparu.

0
Dave Kanter