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?

Was it helpful?

Solution

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.

OTHER TIPS

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.

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.,

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top