"Font-face is effective in Internet Explorer but appears to have compatibility issues in Firefox particularly regarding font formats

I have downloaded a free font that comes in regular and bold variations, with the following formats: svg, eot, ttf, woff. These fonts display properly in Internet Explorer, but they are not working in Firefox. 1. I would like to understand which format is compatible with each web browser. 2. Can someone assist me in resolving this issue?

@font-face {
   font-family: "Nazanin";
   src: url("../font/nazanin.eot");  
   src: local("B Nazanin"),
     url("../font/nazanin.eot?#iefix") format('embedded-opentype'),
     url("../font/nazanin.woff") format("woff"),
     url("../font/nazanin.ttf") format("truetype"),
     url('../font/nazanin.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}
@font-face {
   font-family: "Nazanin";
   src: url("../font/nazaninbold.eot");
   src: local("B Nazanin bold"),
     url("../font/nazaninbold.eot?#iefix") format('embedded-opentype'),
     url("../font/nazaninbold.woff") format("woff"),
     url("../font/nazaninbold.ttf") format("truetype"),
     url('../font/nazaninbold.svg') format('svg');
   font-weight: bold;
   font-style: normal;
}

Additionally, I have verified that the font files themselves are functioning correctly.

csssvgfontsfont-faceeot

Answer №1

You've successfully set up your custom font in your CSS file. Don't forget to create a class for it in order to apply it to your website. Here is an example of how your CSS file should be structured:

.mycustomfont {
    font-family: 'Nazanin';
    font-style: normal; /* or bold, depending on your needs */
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Improved Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Next, in your HTML code:

<div class="mycustomfont">Testing out the custom font</div>

Hopefully, this provides some insight for you...

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

IE10 is not effectively handling multiple media queries

Within my CSS file, I've included a series of media queries specifically tailored for ie10... @media screen and (max-width :1510px), screen\0{ div.jw-menu-3col-sm li a .menuItem { padding: 0 12px; } } @media screen ...

cssmedia-queriesinternet-explorer-10

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

jquerycss

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

jqueryhtmlcss

Bootstrap allows for multiple items to be displayed on the same line, creating

I am currently utilizing Bootstrap framework and have a total of four items. However, the last item is displaying beneath the other three items instead of being on the same line. The current code snippet is as follows: <div class="text-center linksblok ...

csstwitter-bootstrap

CSS - the option element is not appearing when using display:block

I am facing an issue with a select tag and its options. I have used CSS to hide all the options except for the last one which is set to display block. However, the last option is not showing up. Could this be due to the large number of options present? &l ...

htmlcssselect

Create a div element containing a captivating background image that automatically scales to fit any browser window

Currently, I am facing a challenge with scaling background images within a shared div (framework) so that they can resize along with the browser. I have searched for solutions involving Javascript, but none seem to address my specific case. Any assistance ...

htmlcss

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Apply this class exclusively for mobile devices

Is there a way to add the class p-5 only for mobile devices? For desktop computers: <nav class="navbar navbar-expand-lg navbar-light bg-light" style="padding:0px 10px 0px 10px;"> For mobile devices: <nav class="navbar navbar-expand-lg navbar-l ...

htmlcss

Glitchy/Crazy CSS3 Animations

Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works: I apply the .preanimate class to rotate the phasing out di ...

javascriptjquerycsscss-transitionscss-animations

What is the best way to stack text boxes vertically in CSS/HTML?

How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...

csshtml

Enhance your textbox with more detailed descriptions than just displaying NaN

I am working on a form that includes select boxes. If a user selects an option from "Convert From" and another option from "Convert To" but does not enter a number in the input field, instead of displaying NaN in the result text box, I would like to show ...

javascriptjquerycss

What could be causing my div to not appear when using jquery's show function?

I'm dealing with HTML code that looks like this: <div id="answerTypeSection" style="visibility: hidden"> <div class="row"> <div class="col-md-2">adfadfafasdfasdfas</div> </div> <label class="control-label"&g ...

javascriptjqueryhtmlcss

Creating a dynamic image slider that smoothly glides across a webpage

I've been working on a carousel (image slider) for my website and I need some help. Specifically, I want to reposition the entire slider slightly to the left on the webpage. You can see the slider in action on this site: and I also created a jsfiddle ...

javascriptjqueryhtmlcsstwitter-bootstrap

The collapsible section expands upon loading the page

Trying to implement Disqus as a plugin on my test webpage, I created a collapsible section with a "Show comments" button. The idea was to hide the plugin by default and reveal it only when users click on "Show comments". Despite using the w3schools example ...

javascripthtmlcsscollapsable

Change the Background of Your Body?

Here's the deal. I'm looking to create a cool effect where the background of the body slowly fades out and changes periodically in a loop using CSS and jQuery. Any suggestions on how I can make this happen? Appreciate your help! ...

javascriptjquerycssbackgrounddocument-body

CSS problem: HTML element moving to the right upon clicking

Currently, I am utilizing a jQuery popup to present additional information to users. The setup involves having a link on the page that triggers the popup to appear from the top. The popup script being used is sourced from CodePen. However, an issue arises ...

jqueryhtmlcssmagnific-popup

The touch event doesn't seem to be functioning properly on the div element, but it works perfectly on the window element

I have a dilemma that's been puzzling me lately. I'm trying to append a touchevent to a div, but my current method doesn't seem to be working. Here's what I've tried: $("#superContainer").bind('touchstart', function(even ...

javascriptjqueryhtmlcsstouch

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width? Check out Image 1: https://i.sstatic.net/nYNGp.jpg And here is Image 2 (after resizing the window): https://i.sstatic.net/ ...

htmlcssflexbox

What is the best way to adjust the dimensions of an element so that it only fills the size of the initial window or

I need help keeping a specific element at the initial 100% height of the viewport, without it resizing when the user changes their window size. Should I use JavaScript to determine the initial viewport height and then pass those dimensions to the CSS? Can ...

htmlcssviewport

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

javascriptcssextjs