Perché @ font-face genera un errore 404 sui file woff?


422

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

quale versione hai per Firefox e Chrome? Gecko 1.9.2 (Firefox 3.6) aggiunge il supporto per WOFF.
Sotiris,

Prova di nuovo a convertire in OTF in Woff. Ho avuto un problema simile e l'analisi dei file era corrotta. Questo è un buon sito da convertire in diversi tipi di font. onlinefontconverter.com
stacksonstacksonstacks

Risposte:


722

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.

Tipi MIME di IIS 6

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>

5
Nota che potresti ricevere un errore a Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...causa di un conflitto con il file applicationhost.config. Puoi risolvere questo aggiungendo <remove fileExtension=".woff" />subito prima di specificare la nuova mimeMap nel tuo file web.config, per rimuovere il falso duplicato.
Pete,

11
Il tipo MIME è stato standardizzato come application/font-woff.
Fernando Correia,

5
Questo ha fatto il trucco! Se hai lo stesso problema ma con il file .woff2 aggiungi un altro tipo MIME (o config) con quell'estensione
mapache

2
Sembra che le specifiche siano cambiate (di nuovo). Il tuo consiglio application/x-font-woffè ormai obsoleto, a partire da RFC 8081 il tipo corretto di mime è ora font/woffe font/woff2. Vedi la risposta aggiornata nella tua domanda collegata
Liam

3
Questa soluzione non ha funzionato per me. Qual è stato il trucco per me: hotcakescommerce.zendesk.com/hc/en-us/articles/…
Kim Lage,

53

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>

3
e il tag citato <staticContent>deve essere all'interno di un <system.webServer>tag
S.Serpooshan,

funziona perfettamente, riportando da Windows Server 2012 r2, ASP.Net MVC5.
Cromwell,

44

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)


Dove lo cambi? Nel browser o sul server?
Jake Wilson,

Come spiegato nella risposta sopra, deve essere o il server. Questa soluzione è per Windows Server con IIS 6.
adriendenat,

1
Chrome si sta ancora lamentando per me con x-font-woff
Sonic Soul,

Per ripetere il mio commento : sembra che le specifiche siano cambiate (di nuovo). Il tuo consiglio application/x-font-woffè ormai obsoleto, a partire da RFC 8081 il tipo corretto di mime è ora font/woffe font/woff2. Vedi la risposta aggiornata nella tua domanda collegata
Liam

15

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

Vai a Tipi MIME

Aggiungi tipo MIME

Ecco cosa ho fatto per risolvere il problema in IIS 7


2
Si noti che le risposte solo al collegamento sono scoraggiate , le risposte SO dovrebbero essere il punto finale di una ricerca di una soluzione (rispetto a un altro scalo di riferimento, che tende a diventare stantio nel tempo). Si prega di considerare l'aggiunta di una sinossi stand-alone qui, mantenendo il collegamento come riferimento.
Kleopatra,

@kleopatra: aggiornata la risposta con i dettagli e rimosso il collegamento.
Dhanuka777,

"Penso che fare questa configurazione a livello di server sarebbe meglio poiché si applica a tutti i siti Web." - Beh, dipende davvero. Se hai a che fare con un server aziendale, che probabilmente esegue diverse app interne, sì, hai ragione. D'altra parte, se si esegue un sito Web pubblico, che è distribuito su più server, il metodo web.config vince in termini di "coerenza" (cioè sarà lì, non si può dimenticare di configurarlo su uno server).
Balázs,

10

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>

8

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

Estensione del file: .woff

Tipo MIME : application / octet-stream


1

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.


1

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 !


0

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.


0

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


0

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.


0

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.

inserisci qui la descrizione dell'immagine



-1

Risolto:

Ho dovuto usare il metodo Mo'Bulletproofer


Significa che non stai più usando WOFF? Potrebbe essere che il tuo server web non sia configurato correttamente per servire i file WOFF? Ad esempio, vedi: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator

Ho testato il carattere con la codifica con altre macchine. Visualizza bene e nessun errore 404.
dcp3450,

Non mi lascerà. La codifica è troppo lunga. È spiegato qui: paulirish.com/2010/font-face-gotchas
dcp3450

1
Il link nella risposta non esiste più.
Munim Munna,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.