Helvetica fonts always rendering as bold in Chrome

Question

This started happening a few days ago and I can't figure it out. When using Chrome, any text with font-family Helvetica or 'Helvetica Neue' always render in a super heavy/bold font. For example, facebook now looks like this:

Chrome Renders:

Firefox Renders:

It only happens in Chrome. Firefox/IE work fine. It only seems to effect Helvetica fonts. Other fonts or no font-family defined render normally. When I switched computers the strange font actually appeared on the second computer as well making me think it's in a Chrome setting somewhere that stays with my account. Nothing in the Chrome settings/Show Advanced Settings/Web Content seems to effect it at all. When I copy and paste the text from Chrome into Word it renters normally and has Helvetica listed as the font. Although strangely when I choose the fonts drop-down Helvetica-Black is listed but not Helvetica.

Any ideas?!

Answer 1

This is a common problem with browsers on Windows. When sites specify Helvetica as the first font in their CSS "font-family" stanza Windows uses whatever first Helvetica font it can find to render the page.

I've often had to fix this in IE for customers and the solution was always to delete all Helvetica fonts, or use another browser if the customer required Helvetica to be installed. Strange it's now also affecting Chrome. I've mostly seen it in IE when Helvetica Compressed is installed and the website text is unreadable due to the kerning of that particular font.

If they specify something other than Helvetica (e.g. Arial) as the first font in the font-family stanza there's never any problem with Windows browsers rendering text.

Answer 2

Ok, so as I was writing the question I think I stumbled on the fix. In my installed fonts (Start/Run/Fonts), I somehow had Helvetica Black, but not any other version of Helvetica. It seems Chrome was picking the black version making everything look super bold. I certainly didn't manually install Helvetica Black on two computers in the last week, but it's possible that Chrome recently changed how it picks fonts or I used/installed some other software that installed Helvetica Black?

To recap, my fix was:

• Go to your fonts folder (Start/Run/Fonts)
• Find and delete Helvetica Black

Answer 3

The problem can be solved by the following two ways:

Permanent Solution:

I believe you don’t want to delete the font, do you? If no, then this is not of much importance to you. However you if you wish to do so, simply restart your computer in safe mode and delete the font from the Control Panel (See other answer)

Temporary Solution:

Here we would be modifying the chrome file and hence would solve the purpose.

1. Open your Windows Explorer.

2. Go to — > C:\Users[YourName]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\custom.css

3. Now open the file custom.css. This could be done using a notepad.

3b. Chrome stopped supporting this custom user stylesheet, but an addon can provide same functionality: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

4. Simply add the two CSS given below. Your problem is solved!

    @font-face { font-family: 'helvetica neue'; src: local('Arial'); }
    @font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
    @font-face { font-family: 'helvetica'; src: local('Arial'); }
    @font-face { font-family: 'helvetica'; font-weight:bold; src: local('Arial'); }

The above four lines are a simple code that replaces the fonts Helvetica Neue and Helvetica in the browser with Arial Font.

You could repeat this process, or edit, by simply changing the name of the font, and get the font replaced by a local font you prefer.