The .woff font file was not found on the Azure Node.js web app, resulting in a

I have a collection of fonts stored in my wwwroot directory, as displayed on the console of my Node.js application: https://i.sstatic.net/O0ss4.png

These fonts are used in my css like so:

@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;
}

The fonts work perfectly on my localhost, but I encounter an error when I upload the version to Azure. https://i.sstatic.net/L1kix.png

cssnode.jsazureazure-web-app-servicefont-awesome

Answer №1

To gain entry to the command line interface of the Kudu tool, simply visit 

https://<your-webapp-name>.azurewebsites.net/DebugConsole
. Once there, please review the web.config and server.js files if you are utilizing the Express framework. Additionally, make sure to include the prefix symbol / for the url resources/font/... in the css file.

Figure 1 showcases the web.config and server.js located at the wwwroot directory.

https://i.sstatic.net/LwW70.png

Figure 2 displays the rewrite rule for static content within the web.config.

https://i.sstatic.net/nrhkv.png

Figure 3 illustrates the configuration for the express static route in the server.js file.

https://i.sstatic.net/nkF50.png

Answer №2

It seems like there could be an issue with the IIS server node not recognizing the font mimetype. To address this and ensure proper font serving, you can follow these steps:

  1. Download the auto-generated web.config file using the KuDo debugging console.
  2. Insert the following lines into the appropriate location within the 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>

I hope this solution proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to change the color of just the most recently clicked anchor element <a>?

I have a sidebar with anchor elements (Link 1,2,3 in my HTML). I want the text color of these anchors to change when clicked. Additionally, I need only one anchor element to be colored at a time, meaning the previous one should return to its normal color. ...

javascripthtmlcss

When using @font-face, Chrome supports it while IE and Firefox do not

I am finding this quite perplexing. I am currently using font-squirrel to download a web kit in order to display a custom font. You can access the font through this link: If you visit the homepage now: The main text in the center reads "Custom Built Webs ...

htmlcssfont-face

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

javascripthtmljquerynode.jsajax

The malfunctioning Bootstrap navbar dropdown menu is causing a disruption in user experience by unexpectedly logging the user

I'm having an issue with the dropdown menu on my angular app. Every time I click on the Profile link to access the Account and Logout options, it automatically logs me out. <nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top" ...

htmljquerycssangularbootstrap-4

Getting some clarity on how to structure a project using Node.js, Express.js, and React.js

I am in the process of developing a website for online shopping purposes, essentially an e-commerce platform. However, I am facing a dilemma where create-react-app sets up its own Node.js server to communicate with my backend (which handles MySQL queries) ...

javascriptnode.jsreactjsserver

What are the different ways in which :style is utilized in re-frame - with brackets, curly brackets, or simply without any characters?

For my current project, I am utilizing Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to develop a dynamic web application. Typically, when building the project, I initiate the command cider-jack-in-cljs in Emacs, select shadow-cljs, opt for ...

javascriptcssclojureclojurescriptre-frame

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

htmlcssflexbox

App-Root in Angular 2 not loading properly in ExpressJS route

As a newcomer to NodeJS and Express, I am trying to create a simple '/' route that points to Angular's default index.html file located at client/src/index.html. This file contains the app-root tag. While the '/' route successfully ...

node.jsangularexpress

Stylish border radius for Bootstrap progress bars

Here is a snippet of code that I am struggling with: .progress-bar{ border-top-right-radius: 40px !important; border-bottom-right-radius: 40px !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-sha ...

htmlcsstwitter-bootstrap-3progress-bar

Sequelize allows for joining the same table multiple times for complex queries

Here are the models I am working with: const Person = Sequelize.define('person', { name: Sequelize.DataTypes.STRING, age: Sequelize.DataTypes.INTEGER, is_student: Sequelize.DataTypes.BOOLEAN, grade: Sequelize.DataTypes.STRING }); ...

node.jssequelize.js

The middleware function encountered an undefined value in req.body

I've been attempting to validate my data retrieved from my express endpoint using yup. Despite watching numerous tutorials, I am encountering a particular error that has me stuck. Every time I try to validate the data in my middleware, it consistentl ...

javascriptnode.jsexpressyup

What is the best way to update the video source upon clicking a link with JQuery?

Is there a way to change the video src using jQuery when a link is clicked? For example, if the user clicks on "#staff", the video src will be updated. <ul class="nav nav-pills" > <li role="presentation" class="loginPills"><a ...

javascriptjqueryhtmlcssvideo

Upon loading the page, IE11 activates a CSS transition even when a media query that is not applied is present

Encountering a unique situation with IE11 where a panel (DIV) transition is only activated on pageload if a media query matched the highest CSS specificity for the element. The issue does not occur on Chrome, Firefox, or Safari on tablets and phones. The d ...

cssmedia-queriescss-transitionsinternet-explorer-11

Managing complex chains of asynchronous functions to produce a consolidated result

Running on my backend server with express, I have the following: app.post("/login", async(req, res) => { try { const { username, password } = req.body; let result = await checkCredentials(username, password) console.log("resu ...

javascriptnode.jspostgresqlexpressbcrypt

The dimensions of the body are set to 100vh in height and width. However, the div inside this body has a width of either 100vh or 100%, but it is not

I am trying to create a div element that has a width equal to the viewport of the browser. However, I am encountering issues when applying the CSS property width:100vh to the body element. Here is my code snippet: body { font-family: Staatliches; fo ...

javascripthtmlcss

Steps for uploading a file with WebdriverIO

Currently, I am in the process of converting this Ruby code using the selenium-webdriver gem into Node.js with WebdriverIO: @webdriver.navigate.to "https://imgur.com/upload" element = @webdriver.find_element(:id, 'global-files-button') element.s ...

node.jsselenium-webdriverwebdriverwebdriver-io

Experiencing constant errors with axios requests in my MERN Stack project using a Typescript Webpack setup

Hey there, I'm in need of some help! I've been working on a MERN Stack project and have set up Webpack and Babel from scratch on the frontend. However, every time I send a request to my Node Server, I keep getting an error message back. Can anyon ...

node.jsreactjstypescriptwebpackmern

Response a 404 error code if a localization file is not found in an express system

Currently utilizing the generator-angular-fullstack created by DaftMonk, and it has been quite useful. However, there is a small issue that I am facing... My localization process involves using i18next library, which attempts to load a locale file based o ...

node.jsexpressyeoman-generator-angulari18next

Rings that react to both width as well as height

Below is a popular CSS markup for creating responsive circles. http://jsfiddle.net/WTWrB/355/ <div class="circle"></div> .circle { width: 25%; height:0; padding-bottom: 25%; -moz-border-radius: 50%; -webkit-border-radius: ...

htmlcss

Attempting to install gitbook-cli has resulted in an error. It seems that the 'gitbook-cli -

After completing the installation of Node.js, npm, and Gitbook-cli, I encountered an error that looks like this: [root@vagrant-centos65 vagrant]# gitbook -v /usr/lib/node_modules/gitbook-cli/node_modules/fs-extra/lib/index.js:3 const assign = require(&ap ...

node.jsnpmgitbook