Principales respuestas
MVC 5 no carga algunas fuentes al desplegar

Pregunta
-
Hola señores.
Hacía mucho tiempo que no escribía nada, ya que no tenía que escribir preguntas (con las soluciones que se dan a preguntas de otros iba solventando mis problemas, y con mis conocimientos no suelo poder resolver las preguntas de los demás...).
El caso es que aquí estoy, después de llevar dos días dando vueltas y estando en un estado de desesperación alto...
Tengo un proyecto de MVC 5, que en su capa de visualización tiene la siguiente estructura (sólo pongo lo relevante):
Raíz
Content/*.css
fonts/todas las fuentes (ttf, woff...)
App_Start/BundleConfig.cs
Aparentemente, todo está bien montado, funciona todo ok menos este problema que tengo ahora.
El problema es que cuando se ejecuta en debug (en localhost) carga bien todo, pero al publicar la solución y subirla a mi pc local (tengo montado un IIS) o al servidor de desarrollo o de producción, una de las fuentes la carga bien (la fontawesome) pero otras dos no (en concreto la que me interesa más es la Almagro). Y a mi entender está todo exactamente igual, así que o funciona todo o no debería funcionar nada, pero se ve que no...
Lo que ocurre es que la awesome sí que resuelve el directorio virtual donde se aloja la aplicación, con lo que la url resultante es: http://servidor/directorio virtual/fonts/fontaesome.woff (por ejemplo), mientras que en las otras fuentes el directorio virtual se lo pasa "por los bajos", quedano así: http://servidor/fonts/almagro.woff
Sé que tiene que ser una tontería que se me está pasando por alto, o eso espero, pero llevo 2 días mirando y no doy con la solución. He probado lo que sugieren en estos sitios:
- incluir el CssRewriteUrlTransform:
https://stackoverflow.com/questions/22700385/font-awesome-not-working-bundleconfig-in-mvc5
http://ericpanorel.net/2013/10/25/font-awesome-4-0-mvc-bundling-and-minification/
https://stackoverflow.com/questions/20484188/mvc-bundling-and-css-relative-urls
https://stackoverflow.com/questions/12577108/asp-net-mvc4-bundling-with-twitter-bootstrap?rq=1
- poner o quitar la ruta relativa:
https://stackoverflow.com/questions/25810799/bundling-css-works-but-fonts-not-loading
- cambiar ubicación de las fuentes a otra ruta:
https://stackoverflow.com/questions/19000083/font-files-are-not-loading-with-asp-net-bundles
pero nada.
Aquí os dejo información de mi proyecto:
La carga en el bundle lo he probado a poner, entre otras formas, de estas dos:
o
y los css de las fuentes (font-awesome.css y font-alagro.css) son estos:
Y como digo, en localhost en debug va bien, pero al subirlo ocurre que una fuente carga bien y la otra da error:
y la pestaña de redes del navegador:
como veis una se añade con el directorio virtual y la otra no, por eso no la encuentra, lógico!!!:
¿Alguien sabe que cajaro pasa? Es que yo ya no lo entiendo...
Mil gracias por la ayuda.
Saludos a todos, Héctor.
- Editado sanmolhec martes, 19 de diciembre de 2017 7:22 correccion errores
Respuestas
-
Tras darle un montón dfe vueltas y verlo con otra gente, llegamos a la conclusión de que la única diferencia es que las nuevas fuentes no tenían su archivo minificado.
No sabemos el porqué pero al subirlo al servidor (o habilitar la optimización del bundle en local) misteriosamente el css de las nuevas fuentes se creaba sin la ruta bien creada, en lugar de dar un error por no tener el font-almagro.min.css o crearlo con el no minificado correctamente se creaba erróneamente.
Hemos añadido los minificados a la solución y ha comenzado a funcionar correctamente, pero seguimos sin entender las razones... si alguien nos lo explica se lo agradecemos.
Saludos, Héctor.
- Marcado como respuesta sanmolhec martes, 2 de enero de 2018 9:49
Todas las respuestas
-
-
Y se me ha olvidado poner, que una vez compilado y minificado, el inicio del css resultante queda así:
@font-face{font-family:'Almagro';src:url(/fonts/Almagro.eot);src:url(/fonts/Almagro.eot?#iefix) format('embedded-opentype'),url(/fonts/Almagro.woff2) format('woff2'),url(/fonts/Almagro.woff) format('woff'),url(/fonts/Almagro.ttf) format('truetype'),url(/fonts/Almagro.svg#Almagro) format('svg');font-weight:100;font-style:normal}@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
Así que sigo sin entender por qué gaitas a uno le mete la relativa y al otro no...
Gracias.
-
Tras darle un montón dfe vueltas y verlo con otra gente, llegamos a la conclusión de que la única diferencia es que las nuevas fuentes no tenían su archivo minificado.
No sabemos el porqué pero al subirlo al servidor (o habilitar la optimización del bundle en local) misteriosamente el css de las nuevas fuentes se creaba sin la ruta bien creada, en lugar de dar un error por no tener el font-almagro.min.css o crearlo con el no minificado correctamente se creaba erróneamente.
Hemos añadido los minificados a la solución y ha comenzado a funcionar correctamente, pero seguimos sin entender las razones... si alguien nos lo explica se lo agradecemos.
Saludos, Héctor.
- Marcado como respuesta sanmolhec martes, 2 de enero de 2018 9:49