webfonts

Google Fonts – nasty bold

Say you are using Google Web fonts for some CSS. Well, if you don’t include the correct bits you may encounter this problem.

Say, you use the Ubuntu font, for instance, and you have this in your <head>  block:

<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css" />

Then, you use this font everywhere, and this includes a <th> section. You may find that the font displays like this:

Odd bold variant on Google Webfonts

Why has this happened? Well, its because you’ve not included the bold variant of the font in the header link.

For this particular font, it should be:

<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,700" rel="stylesheet" type="text/css" />

700 is the bold variant. Once you’ve changed this, you should find that the bold is rendered correctly:

Fixed version of Google Webfont bold