1

in my web project I need to mix latin and cyrillic characters. Unfortunately the cyrillic characters are not part of the webfont, thus the fallback steps in. As I use a bold webfont the latin characters are bold but the fallback would only be bold, if I set the whole paragraph as font-weight:bold or alike.

I remember discussions that this should be prevented as some browsers can't display them correctly, but during my tests I wasn't able to produce a really broken layout when bolding the webfonts.

What do you think? How can I solve this problem?

Thank you Markus

Markus Bucher
  • 326
  • 2
  • 10

2 Answers2

0

Yes, most webfonts provide specific weights like 400 for Regular and 700 for bold. If these aren't provided and you bold/strong them, you are in essence using the font outside of its original intent.

Font weight values can be used, but I'd always stick with the ones provided with the webfont you're using.

Also, if a weight you declare is not available, it will not show on the page but simply default the "logically closest" (this from the CSS Tricks article below) weight.

See a little more basic description here: https://css-tricks.com/almanac/properties/f/font-weight/

Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
0

Yes it's still recommended you don't do this.

By using font-weight:bold you're forcing the browser to try and create the bold version of this font itself, which can often look distorted / fuzzy. This is referred to as faux styling.

You should set different @font-face definitions with different font-weight values which make use of multiple font files.

Curtis
  • 101,612
  • 66
  • 270
  • 352
  • Unfortunately I can't use a bold webfont in my case. My Question is if there are known browsers in which the usage of faux styling completely breaks the layout as I can't find a live example at the moment. – Markus Bucher Sep 05 '16 at 13:29