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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With