Having trouble with my @font-face not displaying in Firefox, can't seem to pinpoint the issue. Any assistance would be greatly appreciated

I have encountered a problem with the code displayed below. It seems to work perfectly fine on Google Chrome and Internet Explorer, but when I try to load it on Firefox, the custom font fails to load. Can anyone offer some advice on how to resolve this issue?

@font-face{
font-family:"Anxiolytic";
src:
url("../Fonts/Anxiolytic_Regular.eot?") format("eot"),
url("../Fonts/Anxiolytic_Regular.woff") format("woff"),
url("../Fonts/Anxiolytic_Regular.ttf") format("truetype"),
url("../Fonts/Anxiolytic_Regular.svg#Anxiolytic") format("svg");
font-weight: normal;
font-style: normal;
}

Below is an image of the different file types that I downloaded for the Custom Font.

javascripthtmlcssfirefoxfont-face

Answer №1

Your stylesheet and fonts are currently located in the same directory. To fix this issue, you should update your code to the following:

@font-face{
font-family:"Anxiolytic";
src:
url("Anxiolytic_Regular.eot?") format("eot"),
url("Anxiolytic_Regular.woff") format("woff"),
url("Anxiolytic_Regular.ttf") format("truetype"),
url("Anxiolytic_Regular.svg#Anxiolytic") format("svg");
font-weight: normal;
font-style: normal;
}

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

transferring information from Node.js/MongoDB to the front-end (invisible in the browser)

I am trying to retrieve data from a mongodb database and pass it to the front-end. The function I have written works in the console, where I can see an array containing elements. However, when I try to view it in the browser, it shows undefined. I am worki ...

javascriptnode.jsmongodbexpressejs

Error: ReactJs version 0.12 - The destination container specified is not a valid DOM element

I am puzzled by the error message appearing in the console. I have carefully reviewed all guidelines and believe I am following them correctly. Within my webpage, there is a <div id="aisis-writer"></div> This div is where I intend to associ ...

javascriptreactjs

Querying MongoDb results in an empty response

I have encountered an issue while trying to run a simple .find() query on my mongodbAtlas. The result of the query comes back as an empty object. Below is my server file: require("dotenv").config({ path: "./config.env" }); const { MongoClient, ServerApiVe ...

javascriptnode.jsmongodbexpress

Challenges encountered with the css dropdown menu when hovering over li elements

Occasionally, I encounter a problem with my menu. Hovering over the "produkter" menu item should trigger a submenu to appear. Most of the time, I am able to navigate down the submenu with my mouse cursor. However, on some occasions, the submenu disappears ...

htmlcss

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

I'm curious about the impact of jquery.ui.all.css on Tabs As soon as I remove it, <link rel="stylesheet" href="jquery/dev/themes/base/jquery.ui.all.css"> My tabs stop functioning. Here's my query: What exactly does the jquery.ui.all.cs ...

javascriptjqueryhtmlcssjquery-ui

Discovering content between HTML tags using Python Regular Expressions

Can someone help me with extracting the content between HTML tags shown here: <div class="td-wrap"> <a href="/universities/university-cambridge" class="uni-link">University of Cambridge </a> </div> ...

pythonhtmlregex

Merging the HTML and JQuery scripts to create a unified webpage

My Website Dilemma: Working with Intuit Web Designs has presented me with a unique challenge in terms of HTML setup. The platform requires me to paste anything within the <head></head> tags in a separate box, rather than directly into the main ...

jqueryhtmlintuit-partner-platform

What methods can be used to identify the specific Router component being rendered in React?

I am currently working with a Navbar component that I want to render with different CSS styles using styled-components based on the route of the component being rendered. How can I determine whether that component is being rendered or not? const NavbarCont ...

cssreactjsreact-routerstyled-components

Modifying the selected color of DropDownMenu List items

Hey there! I'm currently trying to modify the color of a material-ui element that is selected, but I'm having trouble finding any resources on how to accomplish this. My goal is to switch this pinkish shade to a more soothing blue hue. https://i ...

javascriptreactjsmaterial-uiformsy-material-ui

Using PHP variables in JavaScript to access getElementById

I have multiple forms displayed on a single PHP page. They all follow a similar structure: <form id="test_form_1" action="test_submit.php" method="post" name="test_form"> <label>This is Question #1:</label> <p> &l ...

phpjavascripthtml

What strategies can I employ to help JSDoc/TypeScript recognize JavaScript imports?

After adding // @ts-check to my JavaScript file for JSDoc usage, I encountered errors in VS Code related to functions included with a script tag: <script src="imported-file.js"></script> To suppress these errors, I resorted to using ...

javascripttypescriptvisual-studio-codejsdoc

Assign a background image to a button using an element that is already present on the page

Is there a way to set the background-image of a button without using an image URL? I am hoping to use an element already in the DOM as the background-image to avoid fetching it again when the button is clicked. For example, caching a loading gif within the ...

javascriptjqueryhtmlcss

Toggle the visibility of dropdown list items in different ways: Add or Remove, or Show or

Currently, I am working on a project that involves 3 drop down lists for security questions. I have implemented javascript functionality that triggers an alert when a selection is made in any of the drop down boxes. My challenge now is figuring out how t ...

javascriptjquerydrop-down-menu

Transforming every piece of TypeScript code into JavaScript on the server-side

I'm relatively new to developing Node.js applications for production. I've created an app using TypeScript for the backend of my Node.js project. Currently, in the package.json file, I have the following script section: "scripts": { ...

javascriptnode.jstypescriptbackendconverters

How can I invoke object functions stored in an array using Javascript?

I'm currently attempting to iterate through an array of game objects and invoke their update methods. The challenge is that game objects may have different update implementations - for example, the update function for an enemy is different from that o ...

javascriptarraysinheritancemethodsoverriding

Tips for retrieving the return value from a function with an error handling callback

I am having an issue with my function that is supposed to return data or throw an error from a JSON web token custom function. The problem I am facing is that the data returned from the signer part of the function is not being assigned to the token const a ...

javascriptnode.jstypescriptasynchronousjwt

Unable to get the desired 100px margin at the bottom

Can someone assist me in positioning the right side image at the bottom of the div tag using CSS? I have tried using the .up class in my style tag but with no success. How can I achieve this by adjusting the margin? <!DOCTYPE html> <html lang=" ...

htmlcsshtml5-canvas

What is the process for sending an array as a custom dimension in Google Analytics?

Utilizing Analytics.js for Tag Analysis I have 3 articles each with an array of tags, for example: Rihanna, Beyonce, and JayZ My goal is to determine which tag is the most popular among users. In the first article, I only have the JayZ tag and I send th ...

javascriptgoogle-analytics

Is there a way to showcase the results of a countdown timer script within an HTML code?

I'm currently working on a way to incorporate the results of this online timer script into another script. Below is the timer script that I came across: // Setting the target date for the countdown var countDownDate = new Date("Jan 5, 202 ...

javascripthtmlcssshopifycountdown

Unable to load custom fonts

I've been attempting to upload Gotham fonts onto a website I'm constructing, but unfortunately, it doesn't seem to be working. Despite my efforts to troubleshoot by searching through various resources, including Google, the issue persists. I ...

htmlcssfontsfont-face