How to add font-weight property inside a font definition for the fallback font?

Question

In our project we use Fira Sans Bold for thickening text segments. As a fallback we would like to use Lucida Sans Unicode with font-weight set to bold.

However, we run into a problem that we need to pre-set font-weight property for Lucida Sans Unicode.

What are possible ways to do this?

We tried @font-face.

@font-face {
  font-family: 'Lucida Bold';
  font-weight: bold;
  src: local('Lucida Sans Unicode');
}

However, the problem is, while using Fira Sans Bold we rely only on the font-family and do not use any other other ways of thickening the font, such as font-weight:bold, strong, b, etc. This is insufficient for the @font-face (I raised the question over here: What can be the reason for @font-face failing to work?)

Would be grateful for any ideas.

Answer 1

Declaring font-weight/ font-style etc only affects which text 'matches' a @font-face rule.

As a font face is either bold or it isn't, declaring font-weight:bold won't force it to become bold. It'll just make it show up whenever your text is supposed to be bold.

Presumably the text that uses Fira Sans Bold is bold when font-weight of your text is normal. That means you'll want the bold face of Lucida to match whenever font-weight is normal, like this:

@font-face {
  font-family: 'MyLucidaFont';
  font-weight: normal;
  src: local('Lucida Sans Unicode Bold');
}

"Whenever my text is font-weight:normal and uses font-family:"MyLucidaFont" then this font-face is applied"

Then:

font-family:"Fira Sans Bold","MyLucidaFont"

This is assuming that you can't change your Fira Sans Bold definition. If you can, then it'd be better to change that instead to make sure it applies whenever your texts text-weight is bold:

/* We don't need to declare Lucida at all if we change this one */
@font-face {
  font-family: 'Fira Sans';
  font-weight: bold; /* That's more like it! */
  src: url('/FiraSansBold.woff');
}

Whenever your text has font-weight:bold and font-family:"Fira Sans","Lucida Sans Unicode" it'll be bolded with a fallback.

Keep in mind that "Lucida Sans Unicode" is a font family; a group of font faces.

Answer 2

I think a simple

.supposedly-bolded-text {
  font-family: 'Fira Sans Bold', 'Lucida Bold';
  font-weight: bold;
}

would do the trick for you.