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


422

Estoy usando @font-faceel sitio de mi empresa y funciona / se ve muy bien. Excepto 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 he intentado con las fuentes en la carpeta css e incluso dando toda la url para 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;
}

¿Qué versión tienes para Firefox y Chrome? Gecko 1.9.2 (Firefox 3.6) agrega soporte para WOFF.
Sotiris

Intente convertir a OTF en Woff nuevamente. Tuve un problema similar y el análisis del archivo estaba dañado. Este es un buen sitio para convertir en diferentes tipos de fuente. onlinefontconverter.com
stacksonstacksonstacks

Respuestas:


722

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

Si está 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: de acuerdo con 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 para el tipo mime font/woffy font/woff2.

Tipos MIME de IIS 6

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 :

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

55
Tenga en cuenta que puede obtener un error Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...debido a un conflicto con el archivo applicationhost.config. Puede solucionar esto agregando <remove fileExtension=".woff" />justo antes de especificar el nuevo mimeMap en su archivo web.config, para eliminar el duplicado falso.
Pete

11
El tipo MIME se ha estandarizado como application/font-woff.
Fernando Correia

55
Esto hizo el truco! Si tiene el mismo problema pero con el archivo .woff2 simplemente agregue otro tipo MIME (o configuración) con esa extensión
mapache

2
Parece que la especificación ha cambiado (nuevamente). Su consejo para application/x-font-woffahora está desactualizado, a partir de RFC 8081 el tipo mimo correcto es ahora font/woffy font/woff2. Ver la respuesta actualizada en su pregunta vinculada
Liam

3
Esta solución no me funcionó. El truco para mí fue: hotcakescommerce.zendesk.com/hc/en-us/articles/…
Kim Lage

53

La respuesta a esta publicación fue muy útil y ahorró mucho tiempo. Sin embargo, descubrí que cuando lo usaba FontAwesome 4.50, tenía que agregar una configuración adicional para el woff2tipo de extensión tambié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.

De acuerdo con el comentario de S.Serp, la siguiente configuración debe colocarse dentro de la <system.webServer>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>

3
y su etiqueta mencionada <staticContent>debe estar dentro de una <system.webServer>etiqueta
S.Serpooshan

funciona perfectamente bien, informando desde Windows Server 2012 r2, ASP.Net MVC5.
Cromwell

44

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

Si obtienes eso, puedes cambiar de

aplicación / x-woff

a

application / x -font -woff

¡y ya no tendrás errores de la consola Chrome!

(probado en Chrome 17)


¿Dónde cambias esto? ¿En el navegador o en el servidor?
Jake Wilson el

Como se explica en la respuesta anterior, debe ser el servidor. Esta solución es para Windows Server con IIS 6.
adriendenat

1
Chrome todavía se queja por mí con x-font-woff
Sonic Soul

Para repetir mi comentario : Parece que la especificación ha cambiado (nuevamente). Su consejo para application/x-font-woffahora está desactualizado, a partir de RFC 8081 el tipo mimo correcto es ahora font/woffy font/woff2. Vea la respuesta actualizada en su pregunta vinculada
Liam

15

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 cuadro de diálogo. Agregue la extensión de archivo .woff y especifique "application / x-font-woff" como el tipo MIME correspondiente.

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

Ir a tipos MIME

Añadir tipo MIME

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


2
Tenga en cuenta que se desaconsejan las respuestas de solo enlace , las respuestas SO deben ser el punto final de una búsqueda de una solución (frente a otra escala de referencias, que tienden a quedarse obsoletas con el tiempo). Considere agregar una sinopsis independiente aquí, manteniendo el enlace como referencia.
kleopatra

@kleopatra - Actualizó la respuesta con detalles y eliminó el enlace.
Dhanuka777

"Creo que hacer esta configuración desde el nivel del servidor sería mejor, ya que se aplica a todos los sitios web". - Bueno, eso realmente depende. Si está tratando con un servidor corporativo, que posiblemente ejecuta varias aplicaciones internas, sí, tiene razón. Por otro lado, si ejecuta un sitio web público, que se distribuye en varios servidores, el método web.config gana en términos de "consistencia" (es decir, estará allí, no puede olvidarse de configurarlo en uno servidor).
Balázs

10

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.

<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

Ejecute el Administrador del servidor IIS (comando de ejecución: inetmgr) Abra Tipos Mime y agregue lo siguiente

Extensión de nombre de archivo: .woff

Tipo MIME : aplicación / flujo de octetos


1

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


1

Si está utilizando CodeIgniter en IIS7:

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

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

Espero eso ayude !


0

Esto puede ser obvio, pero me ha tropezado con 404 varias veces ... Asegúrese de que los permisos de la carpeta de fuentes estén configurados correctamente.


0

Compruebe también su reescritor de URL. Puede arrojar 404 si se encuentra algo "extraño".


0

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


0

Si aún no funciona después de agregar tipos MIME, verifique si "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 dada.

ingrese la descripción de la imagen aquí



-1

Resuelto:

Tuve que usar el método Mo'Bulletproofer


¿Eso significa que ya no estás usando WOFF? ¿Podría ser que su servidor web no esté configurado correctamente para servir archivos WOFF? Por ejemplo, vea esto: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator

Probé la fuente con la codificación con otras máquinas. Se muestra bien y no hay error 404.
dcp3450 25/10/10

No me deja. La codificación es demasiado larga. Se explica aquí: paulirish.com/2010/font-face-gotchas
dcp3450

1
El enlace en la respuesta ya no existe.
Munim Munna
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.