Question

I’m using this service to create @font-face rules in my CSS. What I’ve done is created two rules, one for the normal weight font and another for the bold weight version. Like so:

@font-face
{
    font-family: 'CenturyGothicRegular';
    src: url('/static/fonts/gothic_2-webfont.eot');
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
          url('/static/fonts/gothic_2-webfont.woff') format('woff'),
          url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
          url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
... and another for 'CenturyGothicBold'

I’ve then made the overall font for my site default back to Verdana like so:

body
{
    font-family: "CenturyGothicRegular", Verdana;
    font-size: 14px;
}

And made a little rule for <strong> so that rather than making the normal weight version bold (which just seems to stretch it), the bold weight version will be used:

strong
{
    font-weight: normal;
    font-family: 'CenturyGothicBold';
}

An issue I can foresee here is that if the font has defaulted to Verdana, bold won’t be present.

Is there a way that I can specify a new set of rules for <strong> that only apply if the font has defaulted to Verdana?

Answer 1

There is no need to find a trigger to see if a fall back font has been used.

What you need to do is set the the font-weight in the @font-face rule, using the same family name. So you would now call it CenturyGothic:

@font-face {
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicRegular */
    src: url('/static/fonts/gothic_2-webfont.eot');
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/gothic_2-webfont.woff') format('woff'),
         url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
         url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicBold but the urls still need to point to the files they were pointing at */
    src: url('/static/fonts/gothic_2-webfont.eot');
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/gothic_2-webfont.woff') format('woff'),
         url('/static/fonts/gothic_2-webfont.ttf') format('truetype'),
         url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg');
    font-weight: bold;
}

body{
    font-family: "CenturyGothic", Verdana;
    font-size: 14px;
}

strong{
    font-weight: bold;
}

This will combine the two fonts into one font-family allowing it to act like any other font-family i.e. when you make it bold it will display the bold version of the font etc.