Override font-face definition

Question

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.

Answer 1

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/