Error 404 en archivo .woff usando Bootstrap

Un truquillo rápido para un problema que seguro encontramos al utilizar Bootstrap en proyectos MVC (bueno, en realidad en cualquier tipo de proyecto ASP.NET publicado en IIS), y que espero os sea de utilidad: cómo solucionar el incómodo error 404 que encontramos al acceder a una página en la que se utiliza Glyphicons.




Resulta que cuando en nuestras páginas usamos Glyphicons, esos iconos tan chulos que vienen de serie con Bootstrap, se tiene que descargar al navegador la fuente de caracteres utilizada, que se encuentra en varios formatos en la carpeta /fonts del proyecto.

Esto es así porque cada browser/dispositivo requiere un formato de fuente determinada; por ejemplo, Google Chrome utiliza .woff, y en este escenario es en el que se produce el error.

Y el problema ocurre porque algunos de estos formatos de archivo no son reconocidos directamente por el servidor web IIS, por lo que es incapaz de retornar su contenido cuando se le solicita, generando un error 404 (not found) aunque el archivo exista.

La solución es realmente sencilla, basta con incluir el siguiente bloque en la sección <system.webserver> del archivo web.config de nuestro proyecto:

<system.webServer>
  [...]
  <staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  </staticContent>
</system.webServer>

De esta forma indicamos a IIS el tipo de contenido MIME asociado a la extensión .woff, y a partir de ese momento será capaz de procesar peticiones a este tipo de archivos.



Publicado en Variable not found.