Error 404: Troubleshooting an Azure Issue with Custom TrueType Font in .NET MVC 5

I am encountering an issue that has been previously addressed. Despite implementing the suggested solutions, the problem persists.

In an effort to enhance my project, I downloaded two custom ttf fonts called Monterey and Bakery.

Both fonts have been successfully installed and are located in my content folder. I have updated the font properties for both to ensure that content copies "if newer" on build. I have also added the necessary language to my web config file and created font-face rules in my CSS.

Oddly, on my local machine and even when accessing the AzureSites version of my app, the custom fonts are visible. However, on every other computer, they do not appear and a 404 error appears in the console.

Below, you will find the pictures for your reference. Thank you in advance for your assistance!

I have edited the post to include images of the CSS files.

cssasp.net-mvcvisual-studioazurefonts

Answer №1

It seems like the issue may be caused by the .. in ..\fonts/baker.ttf.

Imagine your directory structure like this:

content/
   styles/
     stylesheet.css
   fonts/
     baker.ttf

When your HTML includes

<link rel="stylesheet" href="/content/styles/stylesheet.css"/>

the resolved URL becomes 

/content/styles/../fonts/baker.ttf
and everything works as expected.

However, in an MVC deployment, your stylesheet might be bundled and compiled with a bundler. The link might look something like

<link href="/bundles/css?v=Mny4y0TdpT_Ey6yWlayc6zrqhuQE-XSEh-dK8IJOsqc1" rel="stylesheet">

resulting in the resolved URL to be /bundles/../fonts/baker.ttf which doesn't exist. This is just a speculation based on the information provided.

Consider using an absolute URL like /content/fonts/baker.ttf for the font-face import instead of a relative one.

Moreover, the use of backslashes raises a red flag. URLs should utilize forward slashes, not backslashes.

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

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...

javascriptjqueryhtmlcssmobile

Leveraging ng-class with an Angular $scope attribute

My HTML structure includes: <div class="myDiv"> <div style="width:200px; height:200px;background-image:url('img/200x200/{{largeImg}}.png');" ng-class="{'magictime foolishIn': 1}"> <span> { ...

javascriptjquerycssangularjs

Unable to assign a value to a variable in JavaScript

Today, I delved into the world of JavaScript and decided to test my skills by creating a page that changes images when clicking on a div. Everything worked perfectly until I wanted to add an input element to specify how many steps to jump each time the but ...

javascripthtmlcssinput

Enhancing modal interactions with modal pop-ups

I've been experimenting with different modal effects for a modal popup, following the examples on this site: https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ Here is my code snippet: <div class="md-modal md-effect-1" id="modal- ...

cssasp.netmodalpopup

button to dim the image collection

On the top right corner of my image gallery, there's a button that, when clicked, creates an overlay darkening the image. I'm trying to figure out how to toggle this effect on and off with a click. Any suggestions on how I can achieve this? Here ...

javascripthtmlcss

Reducing size and Assembling JavaScript and CSS

I find myself in a bit of a dilemma when it comes to using just one JS file and one CSS file for a website. Let me elaborate: As someone who mainly works with CMS platforms like Joomla, I often run into issues during page speed tests where experts recomme ...

javascripthtmlcssconcatenationpagespeed

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

javascriptjqueryhtmlcss

Issue with Bootstrap checkbox buttons not rendering properly

I'm attempting to utilize the checkbox button feature outlined on the bootstrap webpage here in the "checkbox" subsection. I copied and pasted the html code (displayed below) from that page into a jsfiddle, and checkboxes are unexpectedly appearing in ...

htmlcsstwitter-bootstrap

Using JavaScript to print radio type buttons

Currently working on a web page and I've encountered a problem that's got me stumped. There are two sets of radio buttons - the first set for package dimensions and the second set for weight. The values from these buttons are assigned to variable ...

javascripthtmlcss

Sending the result of an AJAX request to the view using C#

I am currently utilizing Ajax to trigger an action in the controller. The code looks something like this: $('#kitchen').change(function () { var selectedKitchen = $('#kitchen').val(); if (selectedKitchen != '') { ...

c#jqueryajaxasp.net-mvcrazor

Looking to have the image float after reducing the size of the windows in html?

For my webpage, I want an image to appear on the extreme left when the browser is maximized, but then move to the extreme right when the browser is minimized. I've tried using float, but it doesn't seem to be working. Any suggestions on how to ac ...

htmlcsscss-floatminimize

Mastering the art of seamless navigation within a single page through the magic of

I have two HTML pages: "Login.html" and "index.html". Instead of a normal href linking, I want the user to navigate to "index.html" when they click on the login button. Furthermore, I want the index page to be displayed within the codes of login.html, cre ...

javascriptjquerycsshtml

Angular $watch function not reflecting changes in the user interface

My $watch function is updating the model, but the bound controls in the UI are not reflecting the changes. Here is a screenshot of the updated model. https://i.stack.imgur.com/0ISg5.png The UI code looks like this: <form method="post" action="" role= ...

angularjsasp.net-mvcmodel-view-controller

Implementing jQuery form validation including checking for the strength of the password

My understanding of jQuery was quite basic until I began working on jQuery form validation with password strength check. I successfully completed the password strength check portion, but now I am unsure of how to enable the submit button once the condition ...

javascriptjqueryhtmlcssvalidation

What is the CSS code to modify the color of an SVG ::marker?

I am looking to change the color of an SVG li::marker based on the font color. I attempted using fill="currentColor" but it did not work as expected. Any suggestions on how to resolve this? li::marker { content: url("data:image/svg+xml,% ...

csssvg

Issues with implementing Callouts CSS in Highcharts are causing complications

Currently, I am attempting to construct a callout, and I aim to format the callouts using CSS. Unfortunately, the CSS implementation seems to be malfunctioning for some unknown reason. Below is the HTML: <script src="https://code.highcharts.com/highch ...

javascriptjqueryhtmlcsshighcharts

I'm having trouble getting things to line up properly in Bootstrap5. Can anyone help me figure out why?

When observing this layout, there seems to be a vertical misalignment. The button slightly overflows, while the input field does not. https://i.sstatic.net/pEw2U.png What could be causing this issue? I am currently utilizing Bootstrap 5.2.3 and have incl ...

cssbootstrap-5

What is the best method to deallocate and remove the background-color property of CSS once it has been defined?

There is a perplexing issue that I am unable to resolve. The "Shop" section on this page has an intriguing translucent blue-green background: This background is set using the ID "#left-area". Interestingly, on another page, which can be found at , the sam ...

css

Scrolling with JQuery between a webpage's header and footer

I'm having trouble keeping a div at the top of my page, but I want it to stop scrolling before reaching another div. <div class="my-top"><p>This is the top</p></div> <div class="big-one"> <div class="mini1 ...

javascriptjquerycssscroll

When hovering over a div, reveal another div on top of a third div

Imagine two adjacent divs, A on the left and B on the right with some other elements in between. Is it possible to have a third div, C, appear over div A when hovering over div B? I can control the display property using CSS, but I am unsure how to make d ...

javascriptcss