Mengapa @ font-face melemparkan kesalahan 404 pada file woff?

422

Saya menggunakan @font-facesitus perusahaan saya dan berfungsi / terlihat hebat. Kecuali Firefox dan Chrome akan melemparkan kesalahan 404 pada .wofffile. IE tidak membuang kesalahan. Saya memiliki font yang terletak di root tetapi saya sudah mencoba dengan font di folder css dan bahkan memberikan seluruh url untuk font tersebut. Jika menghapus font-font dari file css saya, saya tidak mendapatkan 404 jadi saya tahu itu bukan kesalahan sintaksis.

Juga, saya menggunakan alat fontsquirrels untuk membuat @font-facefont dan kode:

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}
dcp3450
sumber
versi apa yang Anda miliki untuk firefox dan chrome? Gecko 1.9.2 (Firefox 3.6) menambahkan dukungan untuk WOFF.
Sotiris
Coba ubah menjadi OTF menjadi Woff lagi. Saya memiliki masalah yang sama dan penguraian file rusak. Ini adalah situs yang bagus untuk mengkonversi ke berbagai jenis font. onlinefontconverter.com
stacksonstacksonstacks

Jawaban:

722

Saya mengalami gejala yang sama - 404 pada file woff di Chrome - dan menjalankan aplikasi pada Windows Server dengan IIS 6.

Jika Anda berada dalam situasi yang sama Anda dapat memperbaikinya dengan melakukan hal berikut:

Solusi 1

"Cukup tambahkan deklarasi tipe MIME berikut melalui IIS Manager (tab HTTP Header dari properti situs web): .woff application / x-woff "

Pembaruan: menurut Jenis MIME untuk font woff dan Grsmto jenis MIME yang sebenarnya adalah application / x-font-woff (setidaknya untuk Chrome). x-woff akan memperbaiki Chrome 404s, x-font-woff akan memperbaiki peringatan Chrome.

Pada 2017 : font Woff sekarang telah distandarisasi sebagai bagian dari spesifikasi RFC8081 untuk tipe mime font/woffdan font/woff2.

IIS 6 Jenis MIME

Terima kasih kepada Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Solusi 2

Anda juga dapat menambahkan tipe MIME di konfigurasi web :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>
Ian Robinson
sumber
5
Perhatikan bahwa Anda mungkin mendapatkan kesalahan Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...karena konflik dengan file applicationhost.config. Anda dapat memperbaikinya dengan menambahkan <remove fileExtension=".woff" />tepat sebelum Anda menentukan mimeMap baru di file web.config Anda, untuk menghapus duplikat palsu.
Pete
11
Tipe MIME telah distandarisasi sebagai application/font-woff.
Fernando Correia
5
Ini berhasil! Jika Anda memiliki masalah yang sama tetapi dengan file .woff2 tambahkan saja tipe MIME lain (atau konfigurasi) dengan ekstensi itu
mapache
2
Sepertinya spesifikasinya telah berubah (lagi). Saran Anda untuk application/x-font-woffsekarang kedaluwarsa, sejak RFC 8081 jenis mime yang benar adalah sekarang font/woffdan font/woff2. Lihat jawaban yang diperbarui dalam pertanyaan Anda yang ditautkan
Liam
3
Solusi ini tidak berhasil untuk saya. Apa triknya bagi saya adalah: hotcakescommerce.zendesk.com/hc/en-us/articles/…
Kim Lage
53

Jawaban untuk posting ini sangat membantu dan menghemat waktu. Namun, saya menemukan bahwa ketika menggunakan FontAwesome 4.50, saya harus menambahkan konfigurasi tambahan untuk woff2jenis ekstensi juga seperti yang ditunjukkan di bawah ini permintaan untuk woff2jenis memberikan kesalahan 404 di Alat Pengembang Chrome di bawah Console> Errors.

Menurut komentar S.Serp, konfigurasi di bawah ini harus dimasukkan dalam <system.webServer>tag.

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>
Sunil
sumber
3
dan tag yang Anda sebutkan <staticContent>harus ada di dalam <system.webServer>tag
S.Serpooshan
berfungsi dengan baik, melaporkan dari Windows Server 2012 r2, ASP.Net MVC5.
Cromwell
44

Sebenarnya jawaban @Ian Robinson berfungsi dengan baik tetapi Chrome akan terus mengeluh dengan pesan itu: " Sumber daya diartikan sebagai Font tetapi ditransfer dengan aplikasi tipe MIME / x-woff "

Jika Anda mendapatkannya, Anda dapat mengubah dari

aplikasi / x-woff

untuk

aplikasi / x -font -woff

dan Anda tidak akan lagi memiliki kesalahan konsol Chrome!

(diuji pada Chrome 17)

adriendenat
sumber
Di mana Anda mengubahnya? Di browser atau di server?
Jake Wilson
Seperti yang dijelaskan dalam jawaban di atas, itu pasti server. Solusi ini adalah untuk Windows Server dengan IIS 6.
adriendenat
1
chrome masih mengeluh untuk saya dengan x-font-woff
Sonic Soul
Untuk mengulangi komentar saya : Sepertinya spesifikasi telah berubah (lagi). Saran Anda untuk application/x-font-woffsekarang kedaluwarsa, sejak RFC 8081 jenis mime yang benar adalah sekarang font/woffdan font/woff2. Lihat jawaban yang diperbarui dalam pertanyaan Anda yang ditautkan
Liam
15

Solusi untuk IIS7

Saya juga menemukan masalah yang sama. Saya pikir melakukan konfigurasi ini dari tingkat server akan lebih baik karena ini berlaku untuk semua situs web.

  1. Buka IIS root node dan klik dua kali opsi konfigurasi "MIME Types"

  2. Klik tautan "Tambah" di panel Tindakan di kanan atas.

  3. Ini akan memunculkan dialog. Tambahkan ekstensi file .woff dan tentukan "application / x-font-woff" sebagai tipe MIME yang sesuai.

Tambahkan Jenis MIME untuk ekstensi nama file .woff

Buka Jenis MIME

Tambahkan Jenis MIME

Inilah yang saya lakukan untuk menyelesaikan masalah di IIS 7

Dhanuka777
sumber
2
Perhatikan bahwa jawaban hanya tautan tidak disarankan , jawaban SO harus menjadi titik akhir pencarian solusi (vs. persinggahan referensi lainnya, yang cenderung menjadi basi seiring waktu). Harap pertimbangkan untuk menambahkan sinopsis mandiri di sini, dengan menjaga tautan sebagai referensi.
kleopatra
@kleopatra - Memperbarui jawabannya dengan detail dan menghapus tautan.
Dhanuka777
"Saya pikir melakukan konfigurasi ini dari tingkat server akan lebih baik karena ini berlaku untuk semua situs web." - yah, itu sangat tergantung. Jika Anda berurusan dengan server perusahaan, yang mungkin menjalankan beberapa aplikasi internal, ya, Anda benar. Di sisi lain, jika Anda menjalankan situs web yang menghadap publik, yang didistribusikan melalui beberapa server, metode web.config menang dalam hal "konsistensi" (yaitu akan ada di sana, Anda tidak dapat lupa untuk mengonfigurasinya di satu server).
Balázs
10

Selain jawaban Ian, saya harus mengizinkan ekstensi font di modul pemfilteran permintaan agar berfungsi.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>
martinoss
sumber
8

Jalankan IIS Server Manager (jalankan perintah: inetmgr) Buka Jenis Mime dan tambahkan berikut ini

Ekstensi nama file: .woff

Jenis MIME : application / octet-stream

Guntur
sumber
1

Saya mencoba banyak hal di sekitar izin, tipe mime, dll, tetapi bagi saya itu akhirnya adalah bahwa web.config telah menghapus file handler statis di IIS, dan kemudian secara eksplisit menambahkannya kembali untuk direktori yang akan memiliki file statis. Segera setelah saya menambahkan node lokasi untuk direktori saya dan menambahkan handler kembali, permintaan berhenti mendapatkan 404s.

Mat
sumber
1

Jika Anda menggunakan CodeIgniter di bawah IIS7:

Di file web.config Anda, tambahkan woff ke pola

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

Semoga ini bisa membantu!

IvanJijon
sumber
0

Ini mungkin sudah jelas, tetapi telah membuat saya tersandung 404 beberapa kali ... Pastikan izin folder font diatur dengan benar.

Ecksley
sumber
0

Periksa juga penulis ulang URL Anda. Mungkin melempar 404 jika sesuatu "aneh" ditemukan.

Dmitriy Romanov
sumber
0

Jika Anda tidak memiliki akses ke konfigurasi server web Anda, Anda juga dapat hanya MEMPERBARUI ulang file font sehingga berakhir dengan svg (tetapi simpan formatnya). Bekerja dengan baik untuk saya di Chrome dan Firefox.

Phil McCarty
sumber
0

Jika masih tidak berfungsi setelah menambahkan tipe MIME, harap periksa apakah "Autentikasi Anonim" diaktifkan di bagian Otentikasi di situs dan pastikan untuk memilih "Identitas kumpulan aplikasi" sesuai tangkapan layar yang diberikan.

masukkan deskripsi gambar di sini

Thinira
sumber
-1

Tipe Iime Mime: .woff font / x-woff (bukan aplikasi / x-woff, atau application / x-font-woff)

dhaworth
sumber
1
Tolong sampaikan jawaban Anda dan berikan perincian tentang cara memecahkan masalah.
talex
Saya sekarang telah menunjukkan ini pada jawaban yang diterima .
Liam
-1

Memecahkannya:

Saya harus menggunakan metode Mo'Bulletproofer

dcp3450
sumber
Apakah itu berarti Anda tidak menggunakan WOFF lagi? Mungkinkah server web Anda tidak dikonfigurasi dengan benar untuk melayani file WOFF? Misalnya lihat ini: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator
Saya menguji font dengan pengkodean dengan mesin lain. Menampilkan denda dan tidak ada kesalahan 404.
dcp3450
Itu tidak akan membiarkan saya. Pengkodean terlalu panjang. Dijelaskan di sini: paulirish.com/2010/font-face-gotchas
dcp3450
1
Tautan dalam jawaban tidak ada lagi.
Munim Munna