The Green Foxx The Green Foxx - 6 months ago 144
Node.js Question

Font .woff 404 not found on azure node js web app

I have this fonts present on my

wwwroot
as shown on my nodejs app's console :
enter image description here

I have this usage on my
css
:

@font-face {
font-family: myFont;
src: url(resources/font/Montserrat-Bold.woff) format("truetype");
font-weight: bold;
}
@font-face {
font-family: myFont;
src: url(resources/font/Montserrat-Light.woff) format("truetype");
font-weight: 300;
}
@font-face {
font-family: myFont;
src: url(resources/font/Montserrat-Regular.woff) format("truetype");
font-weight: 400;
}
@font-face {
font-family: myFont;
src: url(resources/font/Montserrat-SemiBold.woff) format("truetype");
font-weight: 500;
}





html, body{
font-family: myFont;
font-weight: 300;
}





It's working perfectly on localhost but im getting this error from the version I uploaded on azure.
enter image description here

Answer

Please access the console of Kudu tool at https://<your-webapp-name>.azurewebsites.net/DebugConsole and check the web.config & server.js files below if using Express framework. And I think you need to add the prefix symbol / for the url resources/font/... in the css file.

Fig 1. The web.config & server.js at the path wwwroot

enter image description here

Fig 2. The rewrite rule for static content in the web.config

enter image description here

Fig 3. The express static route configuration in the server.js

enter image description here