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

Estoy usando @font-face en el sitio de mi compañía y funciona / se ve muy bien. Excepto que Firefox y Chrome lanzarán un error 404 en el archivo .woff . IE no arroja el error. Tengo las fonts ubicadas en la raíz pero he intentado con las fonts en la carpeta css e incluso he dado la url completa para la fuente. Si elimino esas fonts de mi archivo CSS, no obtengo un 404, así que sé que no es un error de syntax.

Además, utilicé la herramienta fontsquirrels para crear las fonts y el código @font-face :

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

Estaba experimentando este mismo síntoma: 404 en archivos woff en Chrome, y estaba ejecutando una aplicación en un servidor de Windows con IIS 6.

Si se encuentra en la misma situación, puede solucionarlo haciendo lo siguiente:

Solución 1

“Simplemente agregue las siguientes declaraciones de tipo MIME a través del Administrador IIS (pestaña Encabezados HTTP de las propiedades del sitio web): .woff application / x-woff

Actualización: según los tipos MIME para las fonts woff y Grsmto, el tipo MIME real es application / x-font-woff (para Chrome al menos). x-woff arreglará Chrome 404s, x-font-woff arreglará las advertencias de Chrome.

A partir de 2017 : las fonts Woff ahora se han estandarizado como parte de la especificación RFC8081 para el tipo mime font/woff y font/woff2 .

Tipos IIS 6 MIME

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

Solución 2

También puede agregar los tipos MIME en la configuración web :

         

En realidad, la respuesta de @Ian Robinson funciona bien pero Chrome continuará quejándose con ese mensaje: ” Recurso interpretado como Fuente pero transferido con el tipo MIME application / x-woff

Si obtienes eso, puedes cambiar de

aplicación / x-woff

a

application / x -font -woff

¡y ya no tendrás ningún error en la consola de Chrome!

(probado en Chrome 17)

La respuesta a esta publicación fue muy útil y un gran ahorro de tiempo. Sin embargo, encontré que al usar FontAwesome 4.50 , tuve que agregar una configuración adicional para el tipo de extensión woff2 también como se muestra a continuación, las solicitudes de woff2 tipo para woff2 daban un error 404 en Herramientas de desarrollador de Chrome en Consola> Errores.

De acuerdo con el comentario de S.Serp, la configuración siguiente debe colocarse dentro de la etiqueta .

         

Solución para IIS7

También me encontré con el mismo problema. Creo que hacer esta configuración desde el nivel del servidor sería mejor, ya que se aplica a todos los sitios web.

  1. Vaya al nodo raíz IIS y haga doble clic en la opción de configuración “Tipos MIME”

  2. Haga clic en el enlace “Agregar” en el panel Acciones en la parte superior derecha.

  3. Esto abrirá un diálogo. Agregue la extensión de archivo .woff y especifique “application / x-font-woff” como el tipo MIME correspondiente.

Agregue el tipo MIME para la extensión de nombre de archivo .woff

Ir a Tipos MIME

Agregar tipo MIME

Esto es lo que hice para resolver el problema en IIS 7

Ejecute el Administrador del servidor IIS (ejecute el comando: inetmgr) Abra Tipos MIME y añada lo siguiente

Extensión de nombre de archivo: .woff

Tipo MIME : application / octet-stream

Además de la respuesta de Ian, tuve que permitir que las extensiones de fuente en el módulo de filtrado de solicitudes lo hicieran funcionar.

                  

Intenté muchas cosas con los permisos, tipos de mime, etc., pero para mí terminó siendo que el archivo web.config había eliminado el controlador de archivos estáticos en IIS y luego lo había agregado explícitamente para directorios que tendrían archivos estáticos. Tan pronto como agregué un nodo de ubicación para mi directorio y volví a agregar el controlador, las solicitudes dejaron de recibir 404s.

Si está utilizando CodeIgniter en IIS7:

En su archivo web.config, agregue woff al patrón

        

Espero eso ayude !

Resuelto:

Tuve que usar el método Mo’Bulletproofer

Esto puede ser obvio, pero me ha hecho tropezar con 404s varias veces … Asegúrese de que los permisos de la carpeta de fonts estén configurados correctamente.

También verifica tu reescritura de URL. Puede lanzar 404 si se encuentra algo “raro”.

Si no tiene acceso a la configuración de su servidor web, también puede RENOMBRAR el archivo de la fuente para que termine en svg (pero conserve el formato). Funciona bien para mí en Chrome y Firefox.

Si aún no funciona después de agregar tipos MIME, compruebe si la “Autenticación anónima” está habilitada en la sección Autenticación en el sitio y asegúrese de seleccionar “Identidad del grupo de aplicaciones” según la captura de pantalla especificada.

enter image description here

IIS Mime Type: .woff font / x-woff (no application / x-woff, o application / x-font-woff)