Bold cyrillic text in HTML

Question

the problem I'm having is that cyrillic text looks bold (Example) even though other languages in the same places are OK. What could be the reason for this behavior? Could it be that the font used doesn't have those characters and some substitute font is used? Or is it because of wrong charset or something (sorry I'm a total noob when it comes to encodings etc...). Thanks for any help.

Answer 1

Ok, your URL helps heaps.

You are using the Ubuntu font from Google Font API: http://www.google.com/webfonts#UsePlace:use/Collection:Ubuntu

You need to ensure you're using the Cyrillic and / or Cyrillic-extended subset in your font.

Go the the font page again and select the correct checkboxes before you copy the script to include in your pages.

Check for the URL to the CSS to look like this:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,400italic&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

Answer 2

The most probable reason is that the Cyrillic letters have been taken from another font, as you suspect. Fonts have different characteristics, so that normal-weight text in one font looks bold when compared with text in another font.

A URL of the page would help, but the image suggests a font difference. The Cyrillic letters are a bit taller and differ in shape from the Latin letters. E.g., the Latin “e” is different from the Cyrillic “е”, but in any reasonable font that contains both of them, they are identical. Ditto for “a”.

The solution is to check your font settings so that all the fonts you suggest in your font-family rule contain both the Latin letters and the Cyrillic letters (and any other characters you might use).