Font Face non funziona in IIS 8.0

118

Ho un font-face nel mio programma generato da Font Squirrel, non riesco proprio a farlo funzionare in IIS, funziona in localhost. Ho aggiunto application / font-WOFF articolo ai miei tipi MIME, ma ancora non voglio lavorare.

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

MODIFICA MIME CORRENTE

Sto usando il carattere MIME IIS 8 predefinito / x-woff

— joetinger
fonte

Come lo chiami? Hai provato l'output di esempio nel file zip Font Squirrel?

— Aibrean

Se stai usando IIS 8 non dovresti aggiungere un tipo MIME nella tua configurazione web per WOFF. In effetti sarebbe più probabile un errore per avere un duplicato.

— Colin Bacon,

@Aibrean sì, l'output di esempio funziona

— joetinger

@ColinBacon l'ho letto dopo averlo postato. Quindi attualmente ho font / x-woff, questo è ereditato da IIS 8.0. Ma ancora nessuna fortuna nell'ottenere il font corretto

— joetinger

259

È bello vedere WOFF2 incluso nei font Font Squirrel! Sebbene IIS 8 non abbia bisogno di un tipo MIME aggiunto perché WOFFne servirà uno per WOFF2. Il W3C consiglia :

application/font-woff2

Per maggiori informazioni WOFF2vedere qui .

Per aggiungere il tipo MIME in IIS, modifica Web.Configcome segue:

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

— Colin Bacon
fonte

2

Ho aggiunto woff2ma ancora niente

— joetinger

4

Se guardi nei tuoi strumenti di sviluppo. Ricevi un 404 quando tenta di ottenere il file del carattere? È quindi necessario verificare che il percorso sia corretto e di disporre delle autorizzazioni per esplorarlo nel browser.

— Colin Bacon

Sì, però, http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2non sono sicuro da dove stiano prendendo la cartella dei bundle. Qualche idea?

— joetinger

4

Presumo che tu stia utilizzando ASP.NET bundling e minification. Se lo imposti nel tuo bundle config BundleTable.EnableOptimizations = true. Il tuo host locale dovrebbe comportarsi come sul tuo server di produzione.

— Colin Bacon

1

Grazie per tutto l'aiuto che ora sta funzionando. Era una combinazione di woff2e dell'errore 404, che alla fine è stato un errore di ortografia nel mio pacchetto. Grazie!

— joetinger

79

Per fare in modo che i caratteri woff e woff2 funzionino correttamente in IIS, è necessario aggiungere i seguenti tipi MIME al 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>

Se continui a riscontrare l'errore 404 su Google Chrome, dovresti svuotare la cache del browser prima di ricaricare la pagina.

— Varun
fonte

2

La specifica ora raccomanda che mimeType per woff sia application / font-woff .

— Steven

2

Stavo ricevendo solo un problema .woff2 404 e questo ha funzionato per me. Ho usato solo le linee relative a woff2

— Francisc0

26

Notare che è anche possibile configurare i tipi MIME all'interno di Gestione IIS. Basta selezionare il sito Web e quindi fare doppio clic sull'icona Tipi MIME in IIS nel riquadro principale.

inserisci qui la descrizione dell'immagine

Dovresti quindi vedere un elenco di tutti i tipi MIME esistenti ed essere in grado di aggiungerne di nuovi utilizzando il collegamento Aggiungi ... nel riquadro di destra.

— Scott Munro
fonte

2

perché non utilizzare web.config,? !!

— Mojtaba Pourmirzaei

7

@MojtabaPourmirzaei Perché non tutti sono amministratori di sistema. Questo è l'intero motivo per cui IIS ha l'interfaccia utente.

— Alph.Dev

Se stai distribuendo un sito Web non .NET in IIS, devi farlo in questo modo (ad esempio un'app Angular).

— Jon Kruger

0

Oggi ho riscontrato questo problema durante la distribuzione di una soluzione Web Icone dell'interfaccia utente Metro4 e il passaggio dall'opzione CDN all'opzione Compilato.

Il mio progetto è stato sviluppato utilizzando la piattaforma WebSharper, ma la soluzione è comunque indipendente da questi dettagli di implementazione.

Per farla breve, ho scoperto che dovevo aggiungere l'estensione del file, ad esempio per .ttf, all'interno della securitysezione sotto il system.webServerdi Web.config.

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

La stessa opzione di configurazione è disponibile anche nelle impostazioni della GUI di IIS

— Giulio
fonte