Sto usando @font-faceil sito della mia azienda e funziona / sembra fantastico. Tranne Firefox e Chrome genererà un errore 404 sul .wofffile. IE non genera l'errore. Ho i caratteri situati nella radice ma ho provato con i caratteri nella cartella css e ho persino fornito l'intero URL per il carattere. Se rimuovo quei caratteri dal mio file CSS non ottengo un 404, quindi so che non è un errore di sintassi.

Inoltre, ho usato lo strumento fontsquirrels per creare @font-facecaratteri e codice:

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

Stavo riscontrando lo stesso sintomo - 404 su file woff in Chrome - e stavo eseguendo un'applicazione su un Windows Server con IIS 6.

Se ti trovi nella stessa situazione, puoi risolverlo nel modo seguente:

Soluzione 1

"Basta aggiungere le seguenti dichiarazioni di tipo MIME tramite Gestione IIS (scheda Intestazioni HTTP delle proprietà del sito Web): .woff application / x-woff "

Aggiornamento: secondo i tipi MIME per i caratteri woff e Grsmto il tipo MIME effettivo è application / x-font-woff (almeno per Chrome). x-woff correggerà Chrome 404s, x-font-woff correggerà gli avvisi di Chrome.

A partire dal 2017 : i caratteri Woff sono stati ora standardizzati come parte delle specifiche RFC8081 per il tipo mime font/woffe font/woff2.

Grazie a Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Soluzione 2

Puoi anche aggiungere i tipi MIME nella configurazione web :

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

La risposta a questo post è stata molto utile e ha fatto risparmiare molto tempo. Tuttavia, ho scoperto che durante l'utilizzo FontAwesome 4.50, ho dovuto aggiungere una configurazione aggiuntiva per il woff2tipo di estensione anche come mostrato di seguito, altre richieste per il woff2tipo generavano un errore 404 negli Strumenti per sviluppatori di Chrome in Console> Errori.

Secondo il commento di S.Serp, la seguente configurazione dovrebbe essere inserita nel <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>

In realtà la risposta di @Ian Robinson funziona bene, ma Chrome continuerà a lamentarsi di quel messaggio: " Risorsa interpretata come carattere ma trasferita con il tipo MIME application / x-woff "

Se lo capisci, puoi cambiare da

application / x-WOFF

per

application / x -font -woff

e non avrai più errori della console di Chrome!

(testato su Chrome 17)

Soluzione per IIS7

Ho anche riscontrato lo stesso problema. Penso che fare questa configurazione a livello di server sarebbe meglio poiché si applica a tutti i siti Web.

1. Vai al nodo radice IIS e fai doppio clic sull'opzione di configurazione "Tipi MIME"

2. Fai clic sul link "Aggiungi" nel pannello Azioni in alto a destra.

3. Questo farà apparire una finestra di dialogo. Aggiungi l'estensione del file .woff e specifica "application / x-font-woff" come tipo MIME corrispondente.

Aggiungi il tipo MIME per l'estensione del nome file .woff

Ecco cosa ho fatto per risolvere il problema in IIS 7

Oltre alla risposta di Ian, ho dovuto consentire alle estensioni dei caratteri nel modulo di filtro delle richieste di farlo funzionare.

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

Esegui IIS Server Manager (esegui comando: inetmgr) Apri i tipi Mime e aggiungi quanto segue

Estensione del file: .woff

Tipo MIME : application / octet-stream

Ho provato un sacco di cose su permessi, tipi di mime, ecc., Ma per me è stato che web.config aveva rimosso il gestore di file statico in IIS, e poi l'ho aggiunto esplicitamente per directory che avrebbero avuto file statici. Non appena ho aggiunto un nodo di posizione per la mia directory e ho aggiunto il gestore, le richieste hanno smesso di ricevere 404s.

Se si utilizza CodeIgniter in IIS7:

Nel tuo file web.config, aggiungi woff al modello

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

Spero che sia d'aiuto !

Questo potrebbe essere ovvio, ma mi ha fatto scattare diverse volte con 404s ... Assicurati che le autorizzazioni per la cartella dei caratteri siano impostate correttamente.

Controlla anche il tuo riscrittore URL. Potrebbe lanciare 404 se viene trovato qualcosa di "strano".

Se non hai accesso alla configurazione del tuo server web, puoi anche semplicemente rinominare il file del font in modo che termini in svg (ma mantieni il formato). Funziona bene per me in Chrome e Firefox.

Se dopo aver aggiunto i tipi MIME non funziona ancora, controlla se "Autenticazione anonima" è abilitata nella sezione Autenticazione nel sito e assicurati di selezionare "Identità del pool di applicazioni" come indicato nella schermata.

Tipo MIME IIS: .woff font / x-woff (non application / x-woff o application / x-font-woff)

Risolto:

Ho dovuto usare il metodo Mo'Bulletproofer