@font-face not working Solution

If you are trying to import external fonts you face one of the most common problems with your Firefox and another browser. Some time your font works 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 pre-defined font. You need to add ! important keyword after the end of your every 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 the 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