Override font-face definition

user_1644211 0
Viewed 1915

Supposing that there is a font-face definition in a file which I have no access, is it possible to override from a global CSS file?

For instance, in one file (non-accesible file) there is the following definition:

@font-face {
    font-family: 'openSans-Bold';
    src: url('OpenSans-Bold-webfont.eot');
    src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Bold-webfont.woff') format('woff'),
         url('OpenSans-Bold-webfont.ttf') format('truetype'),
         url('OpenSans-Bold-webfont.svg#openSans-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

I have tried to override as follows in another global file (using the same name):

@font-face {
  font-family: 'openSans-Bold' !important;
  src: local('Arial') !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

But sadly it's not working.

font-face font-family css
2 Answers

You can't override the font-face itself. I suggest you may change the font-family using JavaScript.

if this is the main font-family for your template you may change it for the body : 

document.body.style.fontFamily = 'Arial';

or you select the elements with this specific font-family.

https://jsfiddle.net/a73ekh6z/

user_64718030

Css rules defined using '@' symbol can't be used for cascading or overriding styles.

The best possible way to override the font-family in your case would be using js/jquery.

js:

document.body.style.fontFamily = 'Arial';

jquery:

$('body').css("font-family", $(this).val());
user_88238520
Related