css - not - font face sass

¿Por qué @ font-face está lanzando un error 404 en archivos woff?

Question

Estoy usando @font-face en el sitio de mi compañía y funciona / se ve muy bien. Excepto que Firefox y Chrome arrojarán un error 404 en el archivo .woff . IE no lanza el error. Tengo las fuentes ubicadas en la raíz, pero he intentado con las fuentes en la carpeta css e incluso doy la url completa para la fuente. Si quito 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 fuentes y el código de @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;
}

Answer 1

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

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

Answer 2

Ejecute IIS Server Manager (ejecute el comando: inetmgr) Abra Tipos Mime y agregue lo siguiente

Extensión de nombre de archivo: .woff

Tipo MIME : application / octet-stream

Answer 3

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 consigues eso, puedes cambiar de

aplicación / x-woff

a

aplicación / x -font -woff

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

(probado en Chrome 17)

Answer 4

Estaba experimentando este mismo síntoma, 404 en archivos woff en Chrome, y estaba ejecutando una aplicación en un servidor 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 de IIS (pestaña Encabezados HTTP de las propiedades del sitio web): .woff application / x-woff "

Actualización: de acuerdo con los Tipos MIME para las fuentes woff y Grsmto el tipo MIME real es application / x-font-woff (para Chrome al menos). x-woff reparará Chrome 404s, x-font-woff solucionará las advertencias de Chrome.

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

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

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

Answer 5

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

Answer 6

Intenté un montón de cosas en torno a los permisos, los tipos mime, etc., pero para mí terminó siendo que web.config eliminó el controlador de archivos estáticos en IIS y luego lo agregué explícitamente para los 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 obtener 404s.

Answer 7

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 para el tipo woff2 estaban dando un error 404 en las Herramientas de desarrollador de Chrome en Consola> Errores.

De acuerdo con el comentario de S.Serp, la siguiente configuración se debe colocar dentro de la etiqueta <system.webServer> .

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

Answer 8

Resuelto:

Tuve que usar el método Mo''Bulletproofer.

Answer 9

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

Answer 10

Si está utilizando CodeIgniter bajo 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 !

Answer 11

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

Answer 12

También revise su rewriter URL. Puede lanzar 404 si se encuentra algo "raro".

Answer 13

Tipo de MIM de IIS: .woff font / x-woff (no application / x-woff, o application / x-font-woff)

Answer 14

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

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