Font Face tidak berfungsi di IIS 8.0

118

Saya memiliki font-face dalam program saya yang dihasilkan dari Font Squirrel. Saya tidak bisa membuatnya berfungsi di IIS, ini berfungsi di localhost. Saya menambahkan aplikasi / font-WOFF artikel untuk Jenis MIME saya tapi masih tidak mau bekerja.

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

EDIT MIME SAAT INI

Saya menggunakan font default IIS 8 MIME / x-woff

css iis fonts woff2 joetinger
sumber
Bagaimana Anda memanggilnya? Apakah Anda mencoba keluaran sampel di zip Font Squirrel?
Aibrean
Jika Anda menggunakan IIS 8 Anda tidak perlu menambahkan jenis mime di konfigurasi web Anda untuk WOFF. Sebenarnya itu akan lebih mungkin kesalahan karena memiliki duplikat.
Colin Bacon
@Aibrean ya output sampel berfungsi
joetinger
@ColinBacon Saya membacanya setelah saya memposting. Jadi saya saat ini memiliki font / x-woff, ini diwarisi dari IIS 8.0. Tapi masih belum berhasil mendapatkan font yang benar
joetinger

Jawaban:

259

Senang melihat WOFF2 disertakan dalam font Font Squirrel! Sementara IIS 8 tidak membutuhkan jenis pantomim yang ditambahkan untuk WOFFitu akan membutuhkan satu untuk WOFF2. W3C merekomendasikan :

application/font-woff2

Untuk info lebih lanjut WOFF2lihat di sini .

Untuk menambahkan jenis pantomim di IIS, ubah Web.Configsebagai berikut:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>
Colin Bacon
sumber
2
Saya menambahkan woff2tapi tetap tidak ada
joetinger
4
Jika Anda melihat alat dev Anda. Apakah Anda mendapatkan 404 saat mencoba mendapatkan file font? Jadi, periksa jalurnya benar dan Anda memiliki izin untuk menjelajahinya di browser Anda.
Colin Bacon
Ya, http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2saya tidak yakin dari mana mereka mendapatkan folder bundel. Ada ide?
joetinger
4
Saya berasumsi Anda menggunakan bundling dan minifikasi ASP.NET. Jika Anda menyetelnya di konfigurasi bundel Anda BundleTable.EnableOptimizations = true. Host lokal Anda harus berperilaku sama seperti di server produksi Anda.
Colin Bacon
1
Terima kasih atas semua bantuannya sekarang. Itu adalah kombinasi dari woff2dan kesalahan 404, yang akhirnya salah mengeja di bundel saya. Terima kasih!
joetinger
79

Untuk membuat font woff dan woff2 berfungsi dengan benar di IIS, Anda harus menambahkan jenis MIME berikut ke file Web.Config.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Jika Anda masih menghadapi kesalahan 404 di Google Chrome, Anda harus menghapus cache browser Anda sebelum memuat ulang halaman.

Varun
sumber
2
Spesifikasi sekarang merekomendasikan mimeType untuk woff menjadi application / font-woff .
Steven
2
Saya hanya mendapatkan masalah .woff2 404 dan ini berhasil untuk saya. Saya hanya menggunakan baris yang berkaitan dengan woff2
Francisc0
26

Perhatikan bahwa dimungkinkan juga untuk mengonfigurasi jenis MIME dalam Manajer IIS. Cukup pilih situs web dan kemudian klik dua kali pada ikon Jenis MIME di bawah IIS di panel utama.

masukkan deskripsi gambar di sini

Anda kemudian akan melihat daftar semua Jenis MIME yang ada dan dapat menambahkan yang baru menggunakan tautan Tambahkan ... di panel kanan.

Scott Munro
sumber
2
kenapa tidak menggunakan web.config,? !!
Mojtaba Pourmirzaei
7
@MojtabaPourmirzaei Karena tidak semua orang adalah sysadmin. Itulah alasan utama IIS memiliki UI.
Alph.Dev
Jika Anda menggunakan situs web non-.NET di IIS, Anda perlu melakukannya dengan cara ini (misalnya aplikasi Angular).
Jon Kruger
0

Saya mengalami masalah ini hari ini saat menerapkan solusi Web ikon Metro4 UI dan beralih dari CDN ke opsi Dikompilasi.

Proyek saya dikembangkan menggunakan platform WebSharper, tetapi solusinya tetap independen dari detail implementasi ini.

Singkat cerita, saya sudah menemukan bahwa aku harus menambahkan ekstensi file, misalnya untuk .ttf, dalam securitybagian bawah system.webServerdari Web.config.

<security>
    <requestFiltering>
        <fileExtensions>
            <add fileExtension=".ttf" allowed="true" />
        </fileExtensions>
    </requestFiltering>
</security>

Opsi konfigurasi yang sama juga tersedia di bawah pengaturan GUI IIS

GUI IIS

Giulio
sumber