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

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.

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>

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>

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)

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

Inilah yang saya lakukan untuk menyelesaikan masalah di IIS 7

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>

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

Ekstensi nama file: .woff

Jenis MIME : application / octet-stream

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.

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!

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

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

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.

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.

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

Memecahkannya:

Saya harus menggunakan metode Mo'Bulletproofer