How to set different font-weight for fallback font?

Question

I\'ve came across a problem with custom font i use for my website.

So i use following CSS for text.

font-family: \"Open Sans\",Helvetica,Arial;
font-wei         


        

Answer 1

Unfortunately, there is no way to define fallback font specific styling using CSS alone.

As such you may want to attempt to work out the font being used, then apply a style as a result, see here for one method which works out the width resulting from applying a font to an element before 'best guessing' which it is.

That said, it is essentially a hack/workaround.

Otherwise, you could look into implementing a method to identify where the symbols are and then wrap them in styles span tags, again this would be a fairly dirty hack as opposed to a clean solution.

Answer 2

You could define a new @font-face for each font you want.

@font-face {
      font-family: 'mainFont';
      src: url(/*Link to Open Sans*/);
      font-weight: 600;
}

@font-face {
      font-family: 'secondaryFont';
      src: local('Helvetica');
      font-weight: 400;
}

@font-face {
      font-family: 'tertiaryFont';
      src: local('Arial');
      font-weight: 600;
}

Then you'll end up with font-family: 'mainFont', 'secondaryFont', 'tertiaryFont'; which should get the desired results.