303 votos

¿Por qué @font-face tira un error 404 en woff archivos?

Estoy con @font-face en mi sitio de la compañía y funciona/se ve muy bien. Excepto para Firefox y Chrome va a tirar un error 404 en el .woff archivo. Es decir no se lanza el error. Tengo las fuentes ubicadas en la raíz pero he probado con las fuentes en la carpeta css y aun dando toda la dirección url de la fuente. Si eliminar las fuentes de mi archivo css no tengo 404 así que sé que no es un error de sintaxis.

También, he utilizado fontsquirrels herramienta para crear el @font-face fuentes y de código:

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

550voto

Ian Robinson Puntos 8666

Yo estaba experimentando este mismo síntoma - 404 en woff archivos en Chrome y se ejecuta una aplicación en un Servidor Windows con IIS 6.

Si usted está en la misma situación, puedes solucionarlo haciendo lo siguiente:

"Simplemente añada el siguiente tipo MIME declaraciones a través del Administrador de IIS (ficha Encabezados HTTP de la página web de propiedades): .woff application/x-woff"

Actualización: de acuerdo a los Tipos MIME de fuentes woff y Grsmto la real tipo MIME application/x-font-woff (para Chrome, al menos). x-woff va a solucionar Chrome 404, x-font-woff va a solucionar Chrome advertencias.

IIS 6 MIME Types

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

También puede agregar los tipos MIME en el web config:

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

38voto

Grsmto Puntos 1357

En realidad la respuesta de Robinson @Ian funciona bien, pero continuará cromo se quejan con ese mensaje: "recurso interpretado como fuente pero transferido con el tipo MIME application/x-woff"

Si has entendido, puede cambiar de

application/x-woff

Para

aplicación / x-fuente- woff

y ya no tendrá ningún error de consola cromo!

(probado en Chrome 17)

1voto

dcp3450 Puntos 1824

Resolvió:

Tuve que usar el método Mo'Bulletproofer

1voto

Ecksley Puntos 56

Esto puede ser obvio, pero ha disparado me con llevaban varias veces... Asegúrese de que los permisos de la carpeta de fuentes están ajustados correctamente.

1voto

Dmitriy Romanov Puntos 73

También revise su sistema de reescritura de URL. Que te pueda confundir 404 si algo "raro" fue encontrado.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X