@font-face not working Solution

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 <style>code here</style>. 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.

Best Book for Entrepreneur ==> Strategies To Build Successful Web Agency

@font-face not working Solution @font-face not working Solution Reviewed by Ganesh Garad on June 06, 2017 Rating: 5

1 comment:

Powered by Blogger.