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

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.

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>

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>

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)

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

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

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>

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

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.

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 !

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.

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

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.

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.

Tipo MIME IIS: .woff font / x-woff (no application / x-woff o application / x-font-woff)

Resuelto:

Tuve que usar el método Mo'Bulletproofer