Why is it that @font-face fails to function properly even after being defined correctly?

Here's the @font-face code I've been using:

@font-face {
  font-family: "NotesEsa-Bold";
  src: url("C:\Users\test\Desktop\Webpage\Fonts\NotesEsaBol.ttf") format("truetype"); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;
}

However, when I try to use this defined font-family in my styles, it doesn't seem to work in Chrome.

Answer №1

Have you double-checked your file imports? Try copying the URL into your browser to see if it directs to a valid page or shows a 404 error. I noticed in your code snippet that there is a missing 'd' before '.ttf', make sure to correct this syntax error.

If the issue persists, ensure that you are referencing the font-family exactly as you have defined it (with or without quotes).

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

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

Preventing jQuery from matching multiple elements

I'm currently working on implementing a rollover effect using jQuery. I've encountered an issue due to the fact that I'm trying to execute a mouseover event on an object containing a link. The specific scenario involves a level-2 navigation ...

Execute MySQL query when the content of an HTML text field changes

My goal is to check if the value entered in an input text box matches any rows in a database. I want the DB to be searched when text is typed into the input field. <input type='text' name='barcode'> I would like it to search the ...

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4: import { Component, ViewEncapsulation } from '@angular/core'; i ...

Creating a CSS image grid without relying on object-fit: cover can be achieved by

My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques. All the solutions I've found so far involve object-fit: cover, which c ...

php$json_data = json_decode($response);

I am brand new to PHP coming from a background in Python. I was fairly comfortable with retrieving JSON results from websites in Python, but for some reason, I can't seem to get it working in PHP. Here is the code snippet I'm using: <?php $ ...

Is there a way to position an X item on the first row and another X item on the following row using flexbox?

I want to use flexbox to arrange 10 buttons in a row on a large screen. On a medium screen, I'd like 5 buttons on the first row and 5 on the second row. For small screens, 2 buttons per row, and for very small screens, one button per row. It's im ...

Issues with jQuery causing responsive CSS triangles to fail implementations

Recently, I stumbled upon the interesting concept of CSS triangles created using element borders. I decided to incorporate this design into one of my custom Wordpress themes, but I encountered a problem. I wanted to add a triangle at the bottom of a div, l ...

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

When conditions are met, all items are added to the array

In my Angular app, I have a user list that I am trying to filter based on the condition age > 45. However, all users are being pushed into the validForScheme array instead of just those meeting the condition. I am unable to figure out what is going wron ...

Can a JavaScript function spontaneously run without being called upon?

<a onclick="determineCountry(data)" class="installbtn">Install</a> My goal is to have the user redirected to one of three sites based on their location when they click the button above. However, there seems to be an issue with the script below ...

Using a custom font in a Django project without relying on the Google Fonts API

I've hit a roadblock in my programming journey and I'm seeking help. As a newcomer to both programming and Django, I've been following a helpful tutorial up until part 4. Everything was going well until I stumbled upon a new font online cal ...

Why does getElementById work when getElementsByClassName doesn't?

I created a script with the purpose of hiding images one and two, while keeping image 3 visible and moving it into their place. The script functions correctly when using div Id's instead of div Classes. However, I prefer to use div classes for groupin ...

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

For those interested, check out this jsfiddle link: http://jsfiddle.net/jaredwilli/vUSPu/ This specific code snippet focuses on creating a multi-select dropdown feature. When a user chooses options from the dropdown and then clicks outside of the menu are ...

Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML: <html> <title>testfile</title> <meta http-equiv="expires" content="0" /> <meta http-equiv="cache-contr ...

Customizing CSS for Internet Explorer browsers

I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

Obtain span value using a CSS selector in Python

I need help extracting the value of a span using a CSS selector soup = BeautifulSoup("<body><main><div class='rentalprice'><span>3.000</span></div></main></body>") pagecontent = soup.find( ...