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

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").

Cedric Ipkiss · Answer 1 · 2016-02-15T17:03:04.597

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>

thanks for the reply che-azeh. I am not looking to replace the font of just the bits but the whole page. But trying to do so in a way where I do not have to duplicate all the classes that use the font-family: myfont; css within them. I can detect the language of the page and can do something like html.fr ..... but I am unable to make the font family: myfont actually use arial in those circumstances — Jon Holland, Feb 15 '16 at 16:14

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

1 Answers1