Overriding CSS font-face declaration with arial (or other standard font) - css

Question

I have a couple of master css font-face declarations that look something like this:
#font-face {
font-weight: normal; font-style: normal;
font-family: 'myfont'; src: url('../fonts/myfont-Reg-webfont.eot'); src: url('../fonts/myfont-Reg-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Reg-webfont.woff') format('woff'), url('../fonts/myfont-Reg-webfont.ttf') format('truetype'), url('../fonts/myfont-Reg-webfont.svg#myfontRegular') format('svg');
}
#font-face {
font-weight: normal; font-style: normal;
font-family: 'myfontBold'; src: url('../fonts/myfont-Bold-webfont.eot'); src: url('../fonts/myfont-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myfont-Bold-webfont.woff') format('woff'), url('../fonts/myfont-Bold-webfont.ttf') format('truetype'), url('../fonts/myfont-Bold-webfont.svg#myfontBold') format('svg');
}
Here and there, in the rest of the css these font-faces are referenced in the font-family tags.
e.g.
h3{ font-family: 'myfontBold',Arial, sans-serif;
The issue that I am trying to solve is that not all characters, such as é,ú,ó, etc., are available in myfont so I need to resort to a standard font for non-English versions. How can I override what "myfont" and "myfontBold" actually use? I want them to use arial, ideally without having to redeclare all classes that use myfont and myfontBold
I have tried including this in the head if in non-English mode
<style>
#font-face {
font-weight: normal; font-style: normal;
font-family: 'myfont'; src: local("Arial"); src:(sans-serif);
}
#font-face {
font-weight: bold; font-style: normal;
font-family: 'myfontBold';src: local("Arial"); src:(sans-serif);
}
</style>
but the original myfont is still active. Is there a way around this? I also tried, adding the !important to after the local("Arial").

Answer 1

I don't think you can actually override a font-family this way using only css and HTML, since your browser has no way of knowing which characters myfont doesn't have and overriding them. The only thing I can think of is a JavaScript or jQuery function which loops round whatever elements contain special characters and replace the the elements' font-family declaration with Arial:
function replaceSpecial(s) {
var a = ["é", "è", "â", "ô"];
$.each(a, function(index, value) {
if (s.text().indexOf(value) > -1) {
s.css("font-family", "arial");
};
});
}
$("span").each(function() {
replaceSpecial($(this));
});
span {
display:block;
width:100%;
margin:20px;
font-family: algerian;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Remplacez précisément tout ce qui n'est pas français</span>
<span>Le côté ... mon âge</span>
<span>This element's font should never be replaced</span>