Webfonts glitch in Firefox on Linux

The Google Web Fonts website is one of web designers’ favourite pages. It’s one of my favourites to be sure! We just itch to replace Arial with something that actually looks nice, has better readability and gives more character to our projects.

On one of my latest projects I noticed though that some fonts were not rendered the same across all browsers. The fonts were rendered noticeably larger in Firefox. Since Firefox is my favourite browser, not only for web development, I eagerly assumed it must have been the other browsers rendering fonts badly.

When on my next project the same was happening with a different font I decided to investigate the issue. To cut the story short, unfortunately it is Firefox that renders web fonts too large, but as it seems only on Linux. But then it’s not all fonts that are distorted – it’s only fonts that come in normal weight (400) but are made bold in the CSS (700 or just bold). Firefox renders fonts exactly as it should if they are provided in the correct weights, but, unlike other browsers, it’s incapable of rendering properly bold fonts when only normal weight is provided. Kind of logical, but the abilities of other browsers on the font front encouraged me to introduce this poor practice into my routine. So after all, it’s not even Firefox, I guess it’s me! :)

From now on, if I want to use a font for both normal and bold text I make sure it comes in both weights. The href attribute in the link tag for it should look something like this:

http://fonts.googleapis.com/css?family=Ubuntu:400,700

If you’ve been having weird issues with font rendering in Firefox I hope the above explains it :)