Échec du décodage de la police téléchargée

Il s'agit d'une erreur que j'obtiens dans Chrome et malheureusement, sa recherche ne m'a pas donné beaucoup de résultats. La police elle-même apparaît correctement. Cependant, j'obtiens toujours cette erreur / avertissement. Plus précisément, voici l'avertissement complet:

"Impossible de décoder la police téléchargée: http: // localhost: 8000 / app / fonts / Lato / "

Mes CSS sont les suivants:

@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 là. Essayer d'utiliser Sans-Seriffait revenir la police à la police normale du navigateur, donc c'est peut-être ça, mais je ne suis pas sûr, et même après la recherche, je n'ai rien trouvé. Merci!

ÉDITER

Il existe différents fichiers de polices, tous appartenant à la même famille. J'essaye de tous les charger. Les fichiers de polices sont .ttf. Je les charger à partir d' un dossier local, et il y a différents fichiers probatiques, comme Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfetc.

Dans la règle css, vous devez ajouter l'extension du fichier. Cet exemple avec le soutien 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 */
}

ÉDITER:

«Impossible de décoder la police téléchargée» signifie que la police est corrompue ou incomplète (métriques manquantes, tables nécessaires, dénomination 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 la police est nécessaire, j'utilise Transfonter pour générer tous les formats de police.

Parfois, le client FTP endommage 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.

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

J'ai arrêté 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");

Passer du format ('woff') au format ('font-woff') m'aide à résoudre ce problème maintenant.

Changez simplement un peu ici de la réponse de Germano Plebani

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

Veuillez vérifier si les sources de votre navigateur peuvent l'ouvrir et quel est le type

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

J'ai récemment eu le même problème en utilisant nginx car certains types de polices mime sont absents de son /etc/nginx/mime.typesfichier vanilla .

J'ai résolu le problème en ajoutant les types mime manquants à l'emplacement où j'en avais besoin 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 ceci pour étendre les mime.types dans nginx: extension du fichier nginx mime.types par défaut

J'ai dû ajouter type="text/css"à ma balise de lien. 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 l'avoir changé, l'erreur a disparu.

J'ai juste eu le même problème et je l'ai résolu en changeant

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

à

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

Pour moi, cette erreur s'est produite lorsque j'ai référencé une police Google en utilisant https. Lorsque je suis passé à http, l'erreur a disparu. (et oui, je l'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);

Parfois, ce problème se produit lorsque vous téléchargez / téléchargez les polices en utilisant la mauvaise méthode FTP. Les polices doivent être éditées par FTP en utilisant la méthode binaire et non ASCII. (Selon votre humeur, cela peut sembler contre-intuitif, lol). Si vous ftp les fichiers de police 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 la méthode binaire.

J'avais le même problème avec font awesome v4.4 et je l'ai corrigé 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;
}

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

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

Éditer

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

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 réponse pour tous les fichiers .ttf

Dans mon cas, cela a été causé par 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 au tronc sous-versionné
2. Le coffre fonctionne comme prévu
3. Créer un correctif SVN des modifications du tronc, pour inclure l'ajout de fichiers de police
4. Appliquer le patch à une autre branche
5. Les fichiers de polices sont ajoutés à la branche subversionée (et peuvent être validés), mais sont corrompus, ce qui entraîne une erreur dans OP.

La solution était de télécharger les fichiers de polices directement dans la branche à partir de mon système de fichiers local. Je suppose que cela s'est produit parce que les fichiers de correctifs SVN doivent tout convertir au format ASCII et ne conservent pas nécessairement le binaire pour les fichiers de polices. Mais ce n'est qu'une supposition.

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 dans un endroit différent des fichiers compilés. Une fois que j'ai dupliqué les fichiers dans chaque chemin, ce problème a disparu.

Dans mon cas, lors du téléchargement d'un modèle, les fichiers de polices n'étaient que des fichiers vides. Probablement un problème avec le téléchargement. Chrome a donné cette erreur générique à ce sujet. J'ai d'abord pensé à la solution de passer de woffà font-woffrésolu, mais cela a seulement obligé Chrome à ignorer les polices. Ma solution consistait à trouver les polices une par une et à les télécharger / les remplacer.

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.

J'utilise .Net Framework 4.5 / IIS 7

Pour le réparer, j'ai mis le fichier Web.config dans le dossier avec le fichier de police.

Contenu de Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

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

git lfs fetch --all

résolu le problème.

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

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

Mon cas était similaire mais la police était corrompue (et donc impossible à décoder). Cela a été causé par la configuration dans maven. L'ajout de nonFilteredFileExtension pour les extensions de polices maven-resources-pluginm'a aidé:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>