Show text in bold if @font-face is not working

0
votes

I'm using the css @font-face function to define a custom font. The font is called 'Myriad Pro Bold', and as fallback I use Arial/Sans-Serif. 

@font-face { font-family: MyriadProBold; src: url('fonts/myriadpro_bold.otf'); }
h3 { font-family: MyriadProBold, Arial, Sans-Serif; }

The font-weight: bold; element is only needed when Arial or another Sans-Serif font is shown. If I add font-weight: bold; to the tag and MyriadProBold loads, the bold font is becoming extra bold, which looks ugly.

So actually I'm looking for something like this

if h3 font is MyriadProBold
  font-weight: normal;
else
  font-weight: bold;

Help is appreciated, thanks!

3
cssfont-face
so, basically you'll need to wait for the font-face to load, or are there other issues? – GNi33

3 Answers

1
votes

Your fallback font do not match on weight with your custom font. However, there are bold variation of arial. You can try
h3 { font-family:custom, 'Arial Bold', sans-serif; }

2
votes

Myriad Pro Bold is a bold typeface of the Myriad Pro family and should be declared that way:

@font-face {
    font-family: "Myriad Pro";
    src: url('fonts/myriadpro_bold.otf');
    font-weight: bold;
}

Then you can simply let, say, h3 have their default boldness, or declare that explicitly if there is some “CSS reset” or other code that disturbs it:

h3 { font-weight: bold; }

Now you simply declare font family the natural way:

h3 { font-family: "Myriad Pro", Arial, sans-serif; }
0
votes

Did you try to set the font-weight in @font-face?

@font-face {
    font-family: "MyriadProBold";
    src: url('fonts/myriadpro_bold.otf');
    font-weight: normal;
}
h3 {
    font-family: MyriadProBold, Arial, Sans-Serif;
    font-weight: bold;
}

Not sure if it works but give it a try.