Search code examples
cssfontsfont-facefont-familywoff

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

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?

Solution

  • 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.