Firefox displays text bold after installing IE 9

HTML & CSS
1

Hi,

I am not sure if this is the correct place to ask this question but here is my problem and I was wondering if anyone else had a similar issue:

I installed Internet Explorer 9 in Windows Vista and when I checked the web page I am working on in Firefox I noticed that the font got bold. I tried other fonts and they are displayed bold too. Chrome displays the text fine. It’s just Firefox that displays the text bold. When I disable “Use Hardware acceleration when available” feature in Firefox’s Options>Advanced>General settings tab, the text displays fine, when I enable it, the text displays bold. I don’t want to disable that feature because it makes Firefox run slower. I want to identify the cause and solve it.

The only thing I changed in my system that might have caused this is installing IE 9. I uninstalled it but the problem is still there.

I am using Open Sans font (from Google Fonts) on my web page. I re-downloaded the font files and replaced them with the existing ones but didn’t work.

Did this ever happen to you?

2

Have you accidentally increased the size of the text on firefox? You can decrease it by pressing ctrl and - signs. Not sure if this is your issue though but might be worth a try.

3

Thank you but it is not the issue.

4

Perhaps IE9 automatically switches on cleartype?

I also see from around the web that others have similar problems and needed to reinstall the [URL=“http://web.nickshanks.com/fonts/microsoft-core-web-fonts”]Arial font.

5

Hi Paul, thanks for your reply. I also came across others reporting the same issue and I actually tried reinstalling Arial font but it did not fix the issue assuming that I installed it correctly. Anyway, I formatted my computer and the issue is gone and I will never bring my cursor near anything related to IE again.

6

lol :slight_smile:

IE10 and 11 are actually quite good but I only ever use them for testing.

7

Hi,

I am having a bold font issue with Firefox (28.0) that I have been trying to solve for some time and I hope that I can find an answer here.

Here is my test results:

Test page:

http://woipo.com/test/

Windows Vista + Chrome: Text displays fine.
Windows Vista + Firefox: Text displays fine.
Windows Vista + Chrome (after installing IE 9): Text displays fine.
Windows Vista + Firefox (after installing IE 9): Text displays bolder.
Windows 7 + Chrome: Text displays fine.
Windows 7 + Firefox: Text displays bolder.

This behavior happens with many fonts that I tested but in this font I am using (Open Sans) it is more noticeable.

So, from my test results, I am assuming that an update in Windows (towards IE 9 and further) is forcing Firefox in a way to display the text bolder. It’s just weird and I don’t have a clue what exactly causes that.

Thanks for any ideas.

8

Hi,

When you use a bold font such as (open sans bold) then that font is already bold so you need to ensure that the browser isn’t making it bolder. Applying that font to a bold element may trigger the browser to make it bolder. Therefore when using that font you should set the font-weight to normal for the h2 and b elements that you have applied it to.

Firefox’s (and IE) default for b and strong is actually ‘font-weight:bolder’ and that means it will make the text bolder than it was before. Webkit has b and strong as font-weight:bold hence the difference.

Here’s a short example that shows this in action (In Firefox).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px
}
b.test { font-weight:bold; }
p { font-weight:bold }
</style>
</head>

<body>
<p><b>Test 1</b></p>
<p><b class="test">Test 2</b></p>
</body>
</html>

The p element is set to bold and therefore the b element in the first example gets set to bolder still.

In test 2 I have set the b element to be font-weight:bold only (not bolder) and therefore it stays at the same weight as the p element and doesn’t get made bolder.

A simpler example with nested b tags:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px
}
</style>
</head>

<body>
<p><b><b>Testing an element inside nested b tags</b></b></p>
<p><b>Test ing an element inside single b tags</b></p>
</body>
</html

To fix this issue you need to add this rule to your reset stylesheet.


strong, b { font-weight:bold }

You also need to take care as I mentioned earlier that when you are using a font that is already bold you ensure that the font-weight is set to normal because the particular font is already bold and you don’t want the browser adding its pseudo bolding.:slight_smile: