Font Face no funciona en IIS 8.0

118

Tengo un tipo de letra en mi programa generado a partir de Font Squirrel. Simplemente no puedo hacer que funcione en IIS, funciona en localhost. Añadí application / font-woff artículo a mis tipos MIME pero todavía no quiere trabajar.

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

EDITAR MIME ACTUAL

Estoy usando la fuente IIS 8 MIME predeterminada / x-woff

css iis fonts woff2 joetinger
fuente
¿Cómo lo estás llamando? ¿Probó la salida de muestra en el zip de Font Squirrel?
Aibrean
Si está utilizando IIS 8, no debería tener que agregar un tipo mime en su configuración web para WOFF. De hecho, sería más probable un error por tener un duplicado.
Colin Bacon
@Aibrean sí, la salida de muestra funciona
joetinger
@ColinBacon Lo leí después de publicar. Así que actualmente tengo font / x-woff, esto se hereda de IIS 8.0. Pero aún así no
tuve

Respuestas:

259

¡Es genial ver que WOFF2 se incluye en las fuentes Font Squirrel! Si bien IIS 8 no necesita un tipo de mime agregado WOFF, necesitará uno para WOFF2. El W3C recomienda :

application/font-woff2

Para obtener más información, WOFF2consulte aquí .

Para agregar el tipo mime en IIS, modifique su Web.Configcomo sigue:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>
Colin Bacon
fuente
2
Añadí woff2pero aún nada
joetinger
4
Si miras en tus herramientas de desarrollo. ¿Obtiene un 404 cuando intenta obtener el archivo de fuente? Por lo tanto, compruebe que la ruta sea correcta y que tenga permisos para buscarla en su navegador.
Colin Bacon
Sí, sin embargo, http://192.168.72.196:85/bundles/Fonts/subway-webfont.woff2no estoy seguro de dónde están obteniendo la carpeta de paquetes. ¿Alguna idea?
joetinger
4
Supongo que está utilizando la agrupación y minificación de ASP.NET. Si configura esto en su paquete config BundleTable.EnableOptimizations = true. Su host local debería comportarse igual que en su servidor de producción.
Colin Bacon
1
Gracias por toda la ayuda que ahora está funcionando. Fue una combinación del woff2error 404 y el, que terminó siendo un error ortográfico en mi paquete. ¡Gracias!
joetinger
79

Para que las fuentes woff y woff2 funcionen correctamente en IIS, debe agregar los siguientes tipos MIME al archivo Web.Config.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Si aún enfrenta el error 404 en Google Chrome, debe borrar la caché de su navegador antes de volver a cargar la página.

Varun
fuente
2
La especificación ahora recomienda que mimeType para woff sea application / font-woff .
Steven
2
Solo recibía un problema .woff2 404 y esto funcionó para mí. Solo usé las líneas pertenecientes a woff2
Francisc0
26

Tenga en cuenta que también es posible configurar tipos MIME dentro del Administrador de IIS. Simplemente seleccione el sitio web y luego haga doble clic en el ícono Tipos MIME debajo de IIS en el panel principal.

ingrese la descripción de la imagen aquí

A continuación, debería ver una lista de todos los tipos MIME existentes y poder agregar nuevos utilizando el enlace Agregar ... en el panel derecho.

Scott Munro
fuente
2
¿por qué no usar web.config,? !!
Mojtaba Pourmirzaei
7
@MojtabaPourmirzaei Porque no todo el mundo es un administrador de sistemas. Esa es la razón por la que IIS tiene UI.
Alph.Dev
Si está implementando un sitio web que no es .NET en IIS, debe hacerlo de esta manera (por ejemplo, una aplicación Angular).
Jon Kruger
0

Tuve este problema hoy mientras implementaba una solución web con los íconos de la interfaz de usuario de Metro4 y cambiaba de la CDN a la opción Compilada.

Mi proyecto se desarrolló utilizando la plataforma WebSharper, pero la solución es independiente de estos detalles de implementación.

En pocas palabras, descubrí que tenía que agregar la extensión del archivo, por ejemplo .ttf, para , dentro de la securitysección debajo system.webServerde Web.config.

<security>
    <requestFiltering>
        <fileExtensions>
            <add fileExtension=".ttf" allowed="true" />
        </fileExtensions>
    </requestFiltering>
</security>

La misma opción de configuración también está disponible en la configuración de la GUI de IIS

GUI de IIS

Giulio
fuente