CODEWITHSUNDEEP
cssnode.jsazureazure-web-app-servicefont-awesome
jofftiquez
jofftiquez

Reputation: 7708

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

Upvotes: 2

Views: 3557

Answers (2)

Developer
Developer

Reputation: 1041

There might be an issue with the IIS server node that it does not understand your font mimetype. To explain it to how to serve proper font you need to:

  1. download you auto generated web.config file using KuDo debugging console.
  2. add these lines to proper place in that file: <configuration> <system.webServer> <staticContent> <remove fileExtension=".otf" /> <remove fileExtension=".woff" /> <mimeMap fileExtension=".otf" mimeType="font/opentype" /> <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> </staticContent> </system.websServer> </configuration>

Hope this helps.

Upvotes: 4

Peter Pan
Peter Pan

Reputation: 24138

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

Upvotes: 4

Related Questions