web-dev-qa-db-ja.com

ダウンロードしたフォントをデコードできませんでした

これはChromeで発生しているエラーです。残念ながらそれを検索してもあまり効果がありません。フォント自体は正しく表示されています。しかし、私はまだこのエラー/警告を受けます。具体的には、これは完全な警告です。

"ダウンロードしたフォントのデコードに失敗しました： http：// localhost：8000/app/fonts/Lato/ "

私のCSSはこれらです：

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

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

わかりません。フォントは正しく適用されますが、警告は常にあります。 Sans-Serifを使おうとすると、フォントは通常のブラウザフォントに戻るので、そうかもしれませんが、私は確信が持てず、検索しても何も見つかりません。ありがとうございます。

編集

同じファミリーに属するさまざまなフォントファイルがあります。それらすべてをロードしようとしています。フォントファイルは.ttfです。私はローカルフォルダからそれらをロードしています、そしてLato-Black.ttf、Lato-Bold.ttf、Lato-Italic.ttfなどのような様々なフォントファイルがあります.

htmlcsshtml5fonts
108
Luís Ferreira

CSSルールでは、ファイルの拡張子を追加する必要があります。最大限のサポートを提供する次の例は、

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

編集：

「ダウンロードしたフォントのデコードに失敗した」とは、フォントが壊れているか不完全であることを意味します（メトリックの欠如、必要なテーブル、命名記録、100万の可能性）.

時々この問題はフォント自体によって引き起こされます。 Googleフォントはあなたが必要とする正しいフォントを提供しますが、フォントフェイスが必要な場合は私は トランスフォーマー を使用してすべてのフォントフォーマットを生成します。

FTPクライアントがファイルを破損させることがあります（ローカルPC上にあるため、この場合ではありません）。ファイルはASCIIではなくバイナリで転送してください。

72
Germano Plebani

Format（ 'woff'）からformat（ 'font-woff'）に変更すると、この問題を解決するのに役立ちます。

ここでちょっとした変更を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 */
}

あなたのブラウザのソースがそれを開くことができるかどうか、そしてその種類は何かを確認してください。

22
Fuad Husni

問題のフォントへのurl()のパスが正しくないことが原因で、Visual Studioで同様の問題が発生しました。

変更した後、私はこのエラーを得るのをやめました（例えば）：

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

これに：

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

サーバーが正しい mime/type を使用してフォントファイルを送信していることを確認してください。

私は最近、 nginx を使用しても同じ問題を抱えています。なぜなら、Vanillaの/etc/nginx/mime.typesファイルからいくつかのフォントMIMEタイプが欠けているからです。

私はこのように必要な場所に不足しているMIMEタイプを追加する問題を修正しました：

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

Nginxでmime.typesを拡張するためにこれをチェックアウトすることもできます： デフォルトのnginx mime.typesファイルを拡張する

11
Matteo

リンクタグにtype="text/css"を追加する必要がありました。私はそれをから変更しました：

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

変更した後、エラーは消えました。

7
nabjoern

私はちょうど同じ問題を抱えていて、変更することによってそれを解決しました

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

に

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

間違ったFTP方法を使用してフォントをアップロードまたはダウンロードしたときに、この問題が発生することがあります。フォントは、ASCIIではなく、バイナリ方式でFTP転送する必要があります。 （あなたの気分によっては、それは直感に反するかもしれません、笑）。 ASCIIメソッドを使用してフォントファイルをftpすると、このエラーメッセージが表示されます。ファイルを 'auto'メソッドでftpしているときにこのエラーメッセージが表示された場合は、ftpでバイナリーメソッドを使用してみてください。

4
Giuseppe

私にとっては、httpsを使ってGoogleフォントを参照したときにこのエラーが発生していました。私がhttpに切り替えたとき、エラーは消えました。 （そして、はい、それが原因であることを確認するために何度か試しました）

だから私は変更しました：

@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);
4
Venryx

私の場合は、.htaccess内のパスファイルが正しくないことが原因でした。ファイルパスが正しいことを確認してください。

3
Ebrahim

私はフォント素晴らしいv4.4で同じ問題を抱えていた、そして私はwoff2フォーマットを取り除くことによってそれを直しました。 Chromeでのみ警告が出ました。

@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

私の場合、これはフォントファイルの追加を含むSVNパッチファイルを作成したことが原因でした。そのようです：

  1. ローカルファイルシステムから破壊されたトランクにフォントファイルを追加する
  2. トランクは期待どおりに動作します
  3. フォントファイルを追加するためのトランク変更のSVNパッチを作成
  4. 他のブランチにパッチを適用する
  5. フォントファイルはsubversionedブランチに追加されます（そしてコミットされます）が、破損していてOPにエラーが発生します。

解決策は私のローカルファイルシステムから直接ブランチにフォントファイルをアップロードすることでした。これはSVNパッチファイルがすべてをASCII形式に変換する必要があり、フォントファイル用のバイナリを必ずしも保持しているとは限らないために起こったと思います。しかし、それは推測にすぎません。

1
MegaMatt

私も同じ問題を抱えていたが、私はすべての.ttfファイルの応答ヘッダに 'Content/Type'： 'application/x-font-ttf'を追加することで解決しました。

1
usernaveen

私にとっては、フォントファイルをアップロードする前にFTPをバイナリモードにするのを忘れていました。

編集

これをテストするには、画像のような他の種類のバイナリデータをアップロードします。それらも表示されない場合、これはあなたの問題かもしれません。

1
Robert Gowland

私のためにそれはダウンロードされなかったlfsファイルに関する問題でした

git lfs fetch --all

問題を修正しました。

https://github.com/git-lfs/git-lfs/issues/325を参照してください

0
Amor

Expressを使用している場合は、次のようなものを追加して静的コンテンツの配信を許可する必要があります。var server = express（）; server.use（express.static（ './ public'））; // publicはアプリのルートフォルダで、そこに含まれるフォントは任意のレベルで含まれます。すなわち、public/fontsまたはpublic/dist/fonts ... // connectを使用している場合は、同様の設定でgoogleを使用します。

0
Cleophas Mashiri

サーバー（ローカルホストではない）上にある場合は、FTPクライアント（たとえば、FileZilla）がファイルを破損し、問題を引き起こす可能性があるため、フォントを手動でアップロードしてください。私にとっては、Cpanelインターフェースを使用して手動でアップロードしました。

0
Saidmamad

私の場合は、テンプレートをダウンロードするときにフォントファイルが空のファイルでした。おそらくダウンロードに関する問題です。 Chromeは、についてこの一般的なエラーを出しました。最初はwoffからfont-woffに変更することで解決したと思いましたが、Chromeがフォントを無視するようにするだけでした。私の解決策はフォントを一つずつ見つけてそれらをダウンロード/交換することでした。

0
André C. Andersen

.NET Framework 4.5/IIS 7を使用しています

これを修正するために、Web.configファイルをフォントファイルと同じフォルダに置きます。

Web.configの内容：

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

私の場合、GatsbyでReactを使用して、すべてのパスを再確認することで問題を解決しました。 SassでReact/Gatsbyを使用していましたが、Gatsbyのソースファイルは、コンパイルされたファイルとは異なる場所でフォントを探していました。ファイルを各パスに複製すると、この問題はなくなりました。

0
Dave Kanter