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-weight:600;

As website is built in my native language, i have to use UTF-8 symbols, that doesn't seems to be included in Open Sans, so they are being shown in Helvetica instead, but the problem is that they have more weight.

Is there any possible solutions to set font-weight parameter to normal, if fallback font is being used?

This topic has been previously explored here: http://stackoverflow.com/questions/1960817/get-computed-font-family-in-javascript/1961519#1961519. There doesn't seem to be a direct way to determine the current font. There is some plugin you can use (mentioned in the response below by @SW4), but it seems to be overkill. — AnchovyLegend, Mar 03 '14 at 16:56

MichaelM · Accepted Answer · 2014-03-03T17:03:25.140

18

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.

edited Mar 03 '14 at 17:03

answered Mar 03 '14 at 16:57

MichaelM

964
7
20

Has anyone got this to work in email clients, such as outlook (2016)? From my testing it does not appear to work. – Dave E Jan 18 '18 at 17:15
1

@DaveElton Try using this solution and see if it works https://stackoverflow.com/a/32056054/3338349 – MichaelM Feb 23 '18 at 16:37
8

This doesn't work, font-weight inside a @font-face does not specify *how* the local font should be rendered, but rather *when* this font should be rendered based on the font-weight value on an element. – Jespertheend Nov 19 '20 at 15:14

score 0 · Answer 2 · answered Mar 03 '14 at 16:55

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.

score 0 · Answer 3 · answered Sep 02 '22 at 03:20

I believe MichaelM's solution won't work. What you can do is specify the font files using the "postcript name" that you can find in various font info sites online.

font-family: "Open Sans",Helvetica-Light;

unfortunately specifying font-weight: 600 might result in undefined behavior. some browser might try to make it bolder, some might just leave it be.,

How to set different font-weight for fallback font?

3 Answers3

Linked