CSS: How to set a fallback for bold font families? - css

Question

I am using an own custom font which I embed like this:
#font-face{font-family:myFont;src:url(css/fonts/myFont.woff);}
#font-face{font-family:myBoldFont;src:url(css/fonts/myBoldFont.woff);}
So, when ever I want to use bold font, I do:
<style>
.bold{
font-family:"myBoldFont";
}
</style>
<div class="bold">Hello world</div>
Also, I need to overwrite all css definitions that use bold typography by default:
<style>
strong,h1,h2,h3,h4,h5,h6,h7,h8{
font-family:"myBoldFont";
font-weight:normal;
}
</style>
As you can see, I must set font-weight:normal because if I'd set font-weight:bold the browser would not find the right font and do a fallback because there is no definition for "bold" in this .woff file.
So, this works quite well for browsers that do support #font-face and .woff files. For browsers that do not, like e.g. older iOS devices, I need to set a fall-back like this:
font-family:"myBoldFont",helvetica,arial,sans-serif;
So, the fallback to helvetica works, but the text is not bold, because font-weight:normal is set.
Now, here is the problem:
If I set font-weight:bold then browsers that can handle woff files
will fall back to a default font instead of using the one I defined
via the woff file.
If I set font-weight:normal then older browsers that cannot handle
woff files won't be able to print text bold.
What should I do?

Answer 1

Have you tried the following : How to add multiple font files for the same font? ?
The #font-face property allows you to specify for which styles to apply the font.