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

これは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など

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フォントは必要な正しいフォントを提供しますが、フォントフェイスが必要な場合は、Transfonterを使用してすべてのフォントフォーマットを生成します。

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

問題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");

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

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

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

一部のフォントMIMEタイプがそのバニラファイルから欠落しているため、nginxを使用して同じ問題が最近発生しました/etc/nginx/mime.types。

次のように、必要な場所に不足している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ファイルを拡張する

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

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

私は同じ問題を抱えていて、変更することで解決しました

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

に

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

私にとって、このエラーは、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);

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

私はfont awesome 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;
}

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

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

編集する

画像などの他のタイプのバイナリデータをアップロードして、これをテストできます。それらも表示に失敗する場合は、これが問題である可能性があります。

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

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

1. ローカルファイルシステムからサブバージョン化されたトランクにフォントファイルを追加する
2. トランクは期待どおりに機能します
3. フォントファイルの追加を含めるために、トランク変更のSVNパッチを作成します
4. 別のブランチにパッチを適用する
5. フォントファイルはサブバージョン化されたブランチに追加されます（コミットすることができます）が、破損しており、OPでエラーが発生します。

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

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

私の場合、テンプレートをダウンロードするとき、フォントファイルは空のファイルでした。おそらくダウンロードに問題があります。Chromeはこの一般的なエラーを示しました。最初はからwoffに変更してfont-woff解決する方法を考えましたが、Chromeでフォントが無視されるだけでした。私の解決策は、フォントを1つずつ検索し、それらをダウンロード/置換することでした。

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

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

それを修正するために、フォントファイルを含むフォルダーにWeb.configファイルを置きました。

Web.configの内容：

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

私にとっては、ダウンロードされなかったlfsファイルの問題でした

git lfs fetch --all

問題を修正しました。

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

サーバー上（localhostではなく）にある場合は、フォントを手動でアップロードしてみてください。FTPクライアント（FileZillaなど）によってファイルが破損し、問題が発生することがあります。私にとっては、Cpanelインターフェースを使用して手動でアップロードしました。

私のケースは同じように見えましたが、フォントが壊れていました（そしてデコードすることが不可能でした）。Mavenの設定が原因でした。内のフォント拡張にnonFilteredFileExtensionを追加することmaven-resources-pluginは私を助けました：

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