Gagal mendekodekan font yang diunduh

Ini adalah kesalahan yang saya dapatkan di Chrome dan sayangnya mencarinya belum memberi saya banyak hasil. Font itu sendiri muncul dengan benar. Namun saya masih mendapatkan kesalahan / peringatan ini. Lebih khusus, ini adalah peringatan penuh:

"Gagal mendekodekan font yang diunduh: http: // localhost: 8000 / app / fonts / Lato / "

CSS saya adalah ini:

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

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

Saya hanya tidak mengerti. Font diterapkan dengan benar, tetapi peringatan itu selalu ada. Mencoba menggunakan Sans-Serifmembuat font kembali ke font browser normal, jadi mungkin itu, tapi saya tidak yakin, dan bahkan setelah pencarian saya tidak menemukan apa-apa. Terima kasih!

EDIT

Ada berbagai file font, semuanya dari keluarga yang sama. Saya mencoba memuat semuanya. File font adalah .ttf. Saya loading mereka dari folder lokal, dan ada berbagai font-file, seperti Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfdll

Dalam aturan css Anda harus menambahkan ekstensi file. Contoh ini dengan dukungan terdalam yang mungkin:

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

EDIT:

"Gagal memecahkan kode fon unduhan" berarti fon rusak, atau tidak lengkap (metrik hilang, tabel yang diperlukan, penamaan catatan, sejuta hal yang mungkin).

Terkadang masalah ini disebabkan oleh font itu sendiri. Font Google menyediakan font yang tepat yang Anda butuhkan tetapi jika font dibutuhkan, saya menggunakan Transfonter untuk menghasilkan semua format font.

Terkadang klien FTP yang merusak file (tidak dalam hal ini karena ada di komputer lokal). Pastikan untuk mentransfer file dalam biner dan bukan dalam ASCII.

Saya mengalami masalah serupa di Visual Studio, yang disebabkan oleh url()jalur yang salah ke font yang dimaksud.

Saya berhenti mendapatkan kesalahan ini setelah mengubah (misalnya):

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

untuk ini:

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

Ubah dari format ('woff') menjadi format ('font-woff') bantu saya untuk menyelesaikan masalah ini sekarang.

Hanya mengubah sedikit perubahan di sini dari jawaban 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 */
}

Silakan periksa apakah sumber browser Anda dapat membukanya dan apa jenisnya

Pastikan server Anda mengirim file font dengan mime / type yang tepat .

Saya baru-baru ini memiliki masalah yang sama menggunakan nginx karena beberapa jenis font mime hilang dari vanilla-nya/etc/nginx/mime.types file .

Saya memperbaiki masalah menambahkan jenis mime yang hilang di lokasi tempat saya membutuhkannya seperti ini:

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

Anda juga dapat memeriksanya untuk memperluas mime.types di nginx: memperluas file nginx mime.types default

Saya harus menambahkan type="text/css"ke tag-tautan saya. Saya mengubahnya dari:

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

untuk:

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

Setelah saya mengubahnya kesalahan hilang.

Saya hanya memiliki masalah yang sama dan menyelesaikannya dengan mengubah

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

untuk

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

Bagi saya, kesalahan ini terjadi ketika saya mereferensikan font google menggunakan https. Ketika saya beralih ke http, kesalahan hilang. (dan ya, saya mencobanya beberapa kali untuk mengonfirmasi itu penyebabnya)

Jadi saya berubah:

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

Untuk:

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

Terkadang masalah ini terjadi ketika Anda mengunggah / mengunduh font menggunakan metode FTP yang salah. Font harus FTP-ed menggunakan metode biner, bukan ASCII. (Tergantung pada suasana hati Anda, mungkin terasa berlawanan dengan intuisi, lol). Jika Anda ftp file font menggunakan metode ASCII, Anda bisa mendapatkan pesan kesalahan ini. Jika Anda ftp file Anda dengan metode 'otomatis', dan Anda mendapatkan pesan kesalahan ini, cobalah ftp memaksa metode biner.

Saya mengalami masalah yang sama dengan font mengagumkan v4.4 dan saya memperbaikinya dengan menghapus format woff2. Saya hanya mendapat peringatan di 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;
}

Dalam kasus saya ini disebabkan oleh file path yang salah, di .htaccess. silakan periksa kebenaran jalur file Anda.

Bagi saya, kesalahannya adalah lupa untuk menempatkan FTP ke mode biner sebelum mengunggah file font.

Edit

Anda dapat menguji ini dengan mengunggah tipe data biner lainnya seperti gambar. Jika mereka juga gagal ditampilkan, maka ini mungkin masalah Anda.

Saya juga memiliki masalah yang sama tetapi saya telah menyelesaikannya dengan menambahkan 'Tipe-Konten': 'application / x-font-ttf' di header respons untuk semua file .ttf

Dalam kasus saya, ini disebabkan oleh pembuatan file patch SVN yang mencakup penambahan file font. Seperti itu:

1. Tambahkan file font dari sistem file lokal ke trunk subversi
2. Batang berfungsi seperti yang diharapkan
3. Buat SVN patch perubahan trunk, untuk memasukkan penambahan file font
4. Terapkan tambalan ke cabang lain
5. File font ditambahkan ke cabang subversi (dan dapat dilakukan), tetapi rusak, menghasilkan kesalahan dalam OP.

Solusinya adalah mengunggah file font langsung ke cabang dari sistem file lokal saya. Saya berasumsi ini terjadi karena file patch SVN harus mengonversi semuanya ke format ASCII, dan tidak perlu mempertahankan biner untuk file font. Tapi itu hanya dugaan.

Dalam kasus saya - menggunakan Bereaksi dengan Gatsby - masalah ini diselesaikan dengan memeriksa ulang semua jalur saya. Saya menggunakan React / Gatsby dengan Sass dan file sumber Gatsby mencari font di tempat yang berbeda dari file yang dikompilasi. Setelah saya menduplikasi file ke setiap jalur masalah ini hilang.

Dalam kasus saya ketika mengunduh template, file font itu hanya file kosong. Mungkin masalah dengan unduhan. Chrome memberikan kesalahan umum ini tentangnya. Saya pikir pada awalnya solusi perubahan dari woffke font-woffdipecahkan, tapi itu hanya membuat Chrome mengabaikan font. Solusi saya adalah menemukan font satu per satu dan mengunduh / menggantinya.

Jika Anda menggunakan express, Anda perlu memperbolehkan penyajian konten statis dengan menambahkan sesuatu seperti: var server = express (); server.use (express.static ('./ public')); // di mana publik adalah folder root aplikasi, dengan font yang terkandung di dalamnya, pada tingkat apa pun, yaitu publik / font atau publik / dist / font ... // Jika Anda menggunakan connect, google untuk konfigurasi yang sama.

Saya menggunakan .Net Framework 4.5 / IIS 7

Untuk memperbaikinya saya meletakkan file Web.config di folder dengan file font.

Konten Web.config:

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

bagi saya itu adalah masalah dengan file lfs yang tidak diunduh

git lfs fetch --all

memperbaiki masalah.

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

Jika ada di server (bukan di localhost), maka cobalah untuk mengunggah font secara manual, karena kadang-kadang klien FTP (misalnya, FileZilla) merusak file dan itu dapat menyebabkan masalah. Bagi saya, saya mengunggah secara manual menggunakan antarmuka Cpanel.

Kasus saya terlihat serupa tetapi fontnya rusak (dan sangat mustahil untuk memecahkan kode). Itu disebabkan oleh konfigurasi di pakar. Menambahkan nonFilteredFileExtension untuk ekstensi font di dalam maven-resources-pluginmembantu saya:

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