CODEWITHSUNDEEP
cssfont-face
user828591
user828591

Reputation: 1262

Use font-weight bold only when Webfont doesn't support characters

I'm using a webfont that only supports most of the latin characters. However, the website is multilingual, russian is one of the languages. As you probably know, russian consists of cyrillic characters, which are then displayed in the secondary font-family. I found Verdana + font-weight:bold to be a good alternative.

However, font-weight bold needs to be related to Verdana only, so I can't just write it into the normal CSS, as the webfont should not be displayed bold. Here some tries that did not work:

CSS:

@font-face {
  font-family: "some Webfont";
  src:url('xyz.eot')
}


/* The font-weight won't work here */
@font-face {
  font-family: "Verdana-Bld";
  src:
    local('Verdana');
  font-weight:bold;
}



/* Doesn't work in IE9 at all */
@font-face {
  font-family: "Verdana-Bld";
  src:
    local('Verdana Bold');
}

/* Doesn't work in IE9 at all */
@font-face {
  font-family: "Verdana-Bld";
  src:
    local('Verdana Bold');
}

.container {
  font-family:"some Webfont", "Verdana-Bld";
}

So font-face is probably not the solution here, Verdana Bold seems to be a good way, however, it's not working when using it in normal CSS like this:

.container {
  font-family:"some Webfont", "Verdana Bold";
}

I don't get it, when using @font-face, it finds and renders that font, but not when using as font-family?

Upvotes: 0

Views: 2309

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201798

Verdana Bold is really just a typeface of the Verdana font family, and it should be used by setting font-family: Verdana; font-weight: bold. In some cases, it is possible to use a typeface as if it were a font family, by declaring its name as the value of font-family, but this is browser-dependent and depends on the font, too; for Verdana Bold, the trick does not appear to work. The more complicated trick of using @font-face works for some browsers but not all, as you have seen; this even depends on the font name you use (e.g., the “full font name” Verdana Bold vs. the PostScript font name Verdana-Bold).

So a different approach is needed: try and find a font that covers all the characters needed. E.g., at Google web fonts, you can set “Script” to “Cyrillic” to find fonts that support Russian letters. Such fonts generally support Latin letters, too.

Upvotes: 1

Ria Weyprecht
Ria Weyprecht

Reputation: 1285

So The font-weight in font-face doesn't set the font-weight but is kind of a filter for browsers to decide if it is the right font to use. So when the browser looks which font to display it will choose the font-face where you set font-weight: bold just if your current text is bold and will take the other one in any other situation.

I think that it is actually possible to make one font bold and the other one regular just if you can call this in font-face directly. (so if you could have something like local('Verdana Bold'). Then just get rid of font-face:bold and it should work fine.

Upvotes: 0

Related Questions