CSS @font-face not working with Firefox, but working with Chrome and IE

Question

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I\'m suspecting it to be a problem of how my CSS files ar

Answer 1

If you are trying to import external fonts you face one of the most common problem with your Firefox and other browser. Some time your font working well in google Chrome or one of the other browser but not in every browser.

There have lots of reason for this type of error one of the biggest reason behind this problem is previous per-defined font. You need to add !important keyword after end of your each line of CSS code as below:

Example:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Description: Enter above code in your CSS file or code here. In above example replace "Hacen Saudi Arabia" with your font-family and replace url as per your font directory.

If you enter !important in your css code browser automatically focus on this section and override previously used property. For More details visit: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html