¿Por qué @font-face arroja un error 404 en archivos woff?
Lo estoy usando @font-faceen el sitio de mi empresa y funciona/se ve muy bien. Excepto que Firefox y Chrome arrojarán un error 404 en el .woffarchivo. IE no arroja el error. Tengo las fuentes ubicadas en la raíz, pero probé con las fuentes en la carpeta css e incluso di la URL completa de la fuente. Si elimino esas fuentes de mi archivo CSS, no obtengo un 404, así que sé que no es un error de sintaxis.
Además, utilicé la herramienta fontsquirrels para crear las @font-facefuentes y el 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;
}
Estaba experimentando el mismo síntoma (404 en archivos woff en Chrome) y estaba ejecutando una aplicación en un servidor Windows con IIS 6.
Si estás en la misma situación puedes 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 fuentes woff y Grsmto, el tipo MIME real es application/x-font-woff (al menos para Chrome). x-woff arreglará Chrome 404s, x-font-woff arreglará las advertencias de Chrome.
A partir de 2017 : las fuentes Woff ahora se han estandarizado como parte de la especificación RFC8081 al tipo mime font/woffy font/woff2.
Gracias a Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis
Solución 2
También puedes agregar los tipos MIME en la configuración 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 respuesta a esta publicación fue muy útil y me ahorró mucho tiempo. Sin embargo, descubrí que cuando usaba FontAwesome 4.50, tenía que agregar una configuración adicional para woff2el tipo de extensión como se muestra a continuación; de lo contrario, las solicitudes de woff2tipo daban un error 404 en las Herramientas para desarrolladores de Chrome en Consola> Errores.
Según el comentario de S.Serp, la siguiente configuración debe colocarse dentro de <system.webServer>la etiqueta.
<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>
En realidad, la respuesta de @Ian Robinson funciona bien, pero Chrome seguirá quejándose con ese mensaje: " Recurso interpretado como fuente pero transferido con aplicación de tipo MIME/x-woff ".
Si obtienes eso, puedes cambiar de
aplicación/x-woff
a
aplicación/x -font -woff
¡Y ya no tendrás ningún error en la consola de Chrome!
(probado en Chrome 17)
Además de la respuesta de Ian, tuve que permitir las extensiones de fuente en el módulo de filtrado de solicitudes para que funcionara.
<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>
Ejecute el Administrador del servidor IIS (ejecute el comando: inetmgr). Abra Mime Types y agregue lo siguiente
Extensión del nombre del archivo: .woff
Tipo MIME : aplicación/flujo de octetos
