Estoy usando @font-face en mi sitio de la compañía y funciona/se ve muy bien. Excepto Firefox y Chrome va a tirar un error 404 en el .woff archivo. Es decir no se lanza el error. Tengo las fuentes ubicadas en la raíz pero he probado con las fuentes en la carpeta css e incluso dar la dirección url completa de la fuente. Si eliminar las fuentes de mi archivo css no me da un 404, así que sé que no es un error de sintaxis.

También, he utilizado fontsquirrels herramienta para crear el @font-face fuentes y 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), que añade soporte para WOFF.
  • FF 3.6 y Chrome 8 dev
  • Tratar de convertir en la OTF en Woff de nuevo. Yo tenía un problema similar y el análisis del archivo estaba corrupto. Este es un buen sitio para convertir en diferentes tipos de fuentes. onlinefontconverter.com
InformationsquelleAutor dcp3450 | 2010-10-25

14 Comentarios

  1. 716

    Que yo estaba experimentando este mismo síntoma – 404 en woff archivos en Chrome – y se ejecuta una aplicación en un Servidor Windows con IIS 6.

    Si usted está en la misma situación, puedes solucionarlo haciendo lo siguiente:

    Solución 1

    «Basta con añadir el siguiente tipo MIME declaraciones mediante el Administrador de IIS (ficha Encabezados HTTP de la página web de propiedades): .woff application/x-woff«

    Actualización: según Tipos MIME para fuentes woff y Grsmto la real tipo MIME application/x-font-woff (para google Chrome, al menos). x-woff va a solucionar Chrome 404, x-font-woff va a solucionar Chrome advertencias.

    Como de 2017: fuentes Woff ahora han sido estandarizados como parte de la RFC8081 especificación para el tipo mime font/woff y font/woff2.

    ¿Por qué es @font-face tirar un error 404 en woff archivos?

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

    Solución 2

    También puede agregar los tipos MIME en el web config:

      <system.webServer>
        <staticContent>
          <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
          <mimeMap fileExtension=".woff" mimeType="font/woff" />
        </staticContent>    
      </system.webServer>
    • Sí, esto funciona. Yo siempre te olvides de actualizar mi servidor de producción con el maldito tipo mime. El problema no se presenta en IE normalmente porque se carga un .eot archivo en primer lugar, si está disponible. En Firefox me sale una 404 si este tipo de mime no es en lugar de .woff.
    • Esto también funciona con Apache para firefox
    • Mismo sucede con IIS7 así. Gracias por la solución y +1 para incluir el archivo de configuración de la versión así. Saludos!
    • Bueno, lo dicho… aún con errores. Hay dos respuestas aquí… cual es el correcto? x-woff o x-font-woff? Ambos parecen todavía de error en chrome.
    • Podría yo crear este web.config archivo junto a los archivos css (no tener acceso al sitio del directorio raíz). ¿Funcionaría?
    • Muchas gracias. Me gustaría añadir que el xml es correcta, pero la captura de pantalla no es porque debe ser x-font-woff exactamente o font-woff, pero no x-woff.
    • Tenga en cuenta que usted puede obtener un error Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’... debido a un conflicto con la applicationhost.archivo de configuración. Usted puede solucionar este problema mediante la adición de <remove fileExtension=".woff" /> a la derecha antes de especificar el nuevo mimeMap en su web.archivo de configuración, para eliminar los falsos duplicados.
    • Pete tema poco de mí antes de que yo vi su comentario, así he editado la respuesta para evitar que otras personas tienen el mismo problema.
    • Si está implementando una aplicación a través de la Web de Implementar agregar el tipo MIME para Web.config; al parecer, la configuración se guarda en Web.config de todos modos.
    • El tipo de MIME se ha estandarizado como application/font-woff.
    • Esto hizo que el truco! Si usted tiene el mismo problema pero con .woff2 archivo que acaba de agregar otro tipo de MIME (o config) con esa extensión
    • Esta es una solución limpia y funcionando bien, pero como el @Sunil la respuesta de arriba, debe incluir también woff2 formato a su respuesta, ya que tanto el formato que se ha 404 problema en el servidor IIS.
    • Se parece a la especificación ha cambiado (otra vez). Su consejo para las application/x-font-woff está ahora fuera de fecha, como de RFC 8081 el tipo mime correcto es ahora font/woff y font/woff2. Consulte el respuesta actualizada en su vinculados pregunta
    • Esta solución no funciona para mí. Lo que hizo el truco para mí fue: hotcakescommerce.zendesk.com/hc/en-us/articles/…

  2. 51

    La respuesta a este post fue muy amable y un gran ahorro de tiempo. Sin embargo, he encontrado que cuando se utiliza FontAwesome 4.50, he tenido que añadir una configuración adicional para woff2 tipo de extensión también como se muestra a continuación demás solicitudes de woff2 tipo estaba dando un error 404 en Chrome Developer Tools en la Consola> los Errores.

    De acuerdo con el comentario de S. Serp, la siguiente configuración se debe poner dentro de <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>
    • y sus etiquetas mencionadas <staticContent> deben estar dentro de un <system.webServer> etiqueta
    • trabajando perfectamente bien, la presentación de informes de Windows Server 2012 r2, ASP.Net MVC5.
  3. 44

    Realidad de la @Ian Robinson respuesta funciona bien pero Chrome seguirá quejarse con el mensaje :
    «De recursos interpretado como Fuente sino que se transfieren con el tipo MIME application/x-woff«

    Si usted consigue que, puede cambiar de

    application/x-woff

    a

    application/xfuente-woff

    y usted no tendrá ningún Chrome consola de errores más !

    (probado en Chrome 17)

    • Donde cambiar esto? En el explorador o en el servidor?
    • Como se explicó en la respuesta anterior, se debe o el servidor. Esta solución es para Windows Server con IIS 6.
    • chrome es todavía quejándose de mí con x-font-woff
    • Para reiterar la mi comentario: se Parece a la especificación ha cambiado (otra vez). Su consejo para las application/x-font-woff está ahora fuera de fecha, como de RFC 8081 el tipo mime correcto es ahora font/woff y font/woff2. Consulte el respuesta actualizada en su vinculados pregunta
  4. 15

    Solución para IIS7

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

    1. Ir a IIS nodo raíz y haga doble clic en el «Tipos MIME»
      opción de configuración

    2. Haga clic en «Agregar» que aparece en el panel de Acciones en la parte superior derecha.

    3. Esto abrirá un cuadro de diálogo. Agregar .la extensión de archivo woff y especificar
      «application/x-font-woff» como el correspondiente tipo MIME.

    Agregar Tipo MIME .woff extensión de nombre de archivo

    ¿Por qué es @font-face tirar un error 404 en woff archivos?

    ¿Por qué es @font-face tirar un error 404 en woff archivos?

    Aquí es lo que hice para solucionar el problema en IIS 7

    • Tenga en cuenta que link-sólo respuestas son desalentados, de MODO que las respuestas deben ser el punto final de una búsqueda de una solución (frente a otra escala de referencias, que tienden a obtener obsoletos con el tiempo). Por favor, considere la adición de un stand-alone sinopsis aquí, manteniendo el vínculo como una referencia.
    • Actualizada la respuesta con los detalles y eliminado el enlace.
    • «Yo creo que haciendo esta configuración de nivel de servidor sería mejor, ya que se aplica para todos los sitios web.» – bueno, eso realmente depende. Si usted está tratando con un servidor de la empresa, que posiblemente se ejecuta varias aplicaciones internas, sí, estás en lo correcto. Por otro lado, si ejecuta un sitio web de uso público, que se distribuye a lo largo de varios servidores de la web.método config gana en términos de «consistencia» (es decir, va a estar ahí, no se puede olvidar de configurar en un servidor).
  5. 8

    Ejecutar el Servidor IIS Manager (ejecutar el comando : inetmgr)
    Abrir los Tipos Mime y agregar la siguiente

    Extensión de nombre de archivo: .woff

    Tipo MIME: application/octet-stream

  6. 8

    Además de Ian respuesta, tenía que permitir que la fuente de las extensiones en el módulo de filtrado de solicitudes para hacer el trabajo.

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

    He intentado un montón de cosas alrededor de permisos, tipos mime, etc, pero para mí terminó siendo que la web.config había quitado el controlador de archivos Estáticos en IIS y, a continuación, agrega explícitamente de nuevo para los directorios que tienen los archivos estáticos. Tan pronto como he añadido un nodo de ubicación para mi directorio y añadió que el controlador de la espalda, las solicitudes dejó de recibir 404.

  8. 1

    Si usted está usando CodeIgniter bajo IIS7 :

    En su web.archivo de configuración, agregar woff a la 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 que ayude !

  9. 0

    Esto puede ser obvio, pero me ha saltado con 404 un número de veces… asegúrese de que la carpeta de fuentes de permisos están configurados correctamente.

  10. 0

    Si usted no tiene acceso a su servidor web de configuración, también puede cambiar el nombre del archivo de fuente, de modo que termina en svg (pero conservan el formato). Funciona bien para mí en Chrome y Firefox.

  11. 0

    Si aún así no funciona después de la adición de tipos MIME, por favor, compruebe si «la Autenticación Anónima» es habilitar en la sección de Autenticación en el sitio y asegúrese de seleccionar «Aplicación» identidad de grupo como por la captura de pantalla concreta.

    ¿Por qué es @font-face tirar un error 404 en woff archivos?

  12. -1

    Resuelto:

    Tuve que usar Mo’Bulletproofer método

    • ¿Eso significa que usted no está utilizando WOFF más? Podría ser que tu servidor web no está correctamente configurado para servir WOFF archivos? E. g. ver esto: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
    • no la woff codificación de base64
    • He probado la fuente con la codificación con otras máquinas. Muestra fino y no de error 404.
    • Puede publicar su nuevo css?
    • No me deja. La codificación es la forma larga. Se explica aquí: paulirish.com/2010/font-face-gotchas
    • En el enlace de la respuesta no existe.

Dejar respuesta

Please enter your comment!
Please enter your name here