I wanted to use Google Chrome to create this post, but I had to use Safari

I started using a MacBook Pro a few months ago and haven’t had many issues with the transition. I’m finally getting used to the differences in how the operating system works and all the differences that you find out about as you go. Overall, it has been a good experience with the exception of all of the problems I have had with fonts. I have a font manager installed with way too many fonts and so I’ve been trying to pare them down to something more usable, but keep running into issues.

WordPress Font Messed Up in Google Chrome on Mac

The first issue I had was with the Arial font. It was installed, but not active (or something like that) and so sites using the Arial font ended up showing a serif font instead. As a web developer, it was a little frustrating, but wasn’t a great hindrance to browsing or productivity, however. After playing with the font manager for a while, I finally got Arial to show up.

That was a couple of months ago. Last week, though, something even stranger started happening and after some troubleshooting, I finally realized that it only happens in Google’s Chrome browser. I used to use the Firefox browser almost exclusively because of the great development plugins available and the tabbed browsing. However, with all of the memory problems I had been having with Firefox, where it would constantly take more and more memory, even when I wasn’t actively using the program, I started using Chrome more and more.

Google Chrome Mac Font Issue Example
Google Chrome Mac Font Issue Example

Google Chrome Mac Font Problem in Google HangoutThe current issue with fonts on the Mac in Chrome is much worse than the previous issue. Now, instead of just replacing the font with a serif font, the font is replaced with some type of wing ding font that makes entire sections of the page completely unreadable.

I’ve seen the issue not only in my WordPress management interface, but on Google sites, such as Gmail and Google+. Your Google+ circles are really hard to work with when you can’t read the name of the circle.

Chrome on Mac Font Issue Google Plus Circles
Chrome on Mac Font Issue Google Plus Circles

In trying to troubleshoot the problem, I’ve run into a couple of sites that talk about a known issue with font rendering in Chrome on the Mac only. Apparently, from what I’ve read, the issue is that Chrome will only read fonts from the Mac system and not from a font manager, as a security measure. The crazy thing, at least to me, is that it actually affecte Helvetica, the default Mac font.

Here are a couple of the solutions I found, along with the results in my own test.


FontAgent Pro deactivate system fonts

Dominic Williams posted a solution for the Mac Chrome font issue that consists of deactivating the main system fonts in your font manager and activating them in the Mac font system. I use FontAgent Pro on my MacBook Pro, so I disabled my Arial font in FontAgent Pro and then enabled it in FontBook (which is the default font manager on the Mac). This fixed my problem, at least for now.

Dominic Williams also posted a follow-up to the solution for the Mac Chrome font issue that highlights the fact that this fix won’t work for fonts that won’t show up in your Mac font system, such as Microsoft Office fonts, such as Calibri.

Google Chrome Mac Font Problem in Gmail
Google Chrome Mac Font Problem in Gmail

For the moment, there doesn’t seem to be any fix for this issue, but I did run into another Mac Chrome font problem fix by SurgeWorks iPhone & iPad app development company (whose site has some layout issues in the desktop version of Safari while it slowly loads on my sporadic Internet connection) which was made into a Mac Chrome font issue fix script by web designer Daniel Hanly. The script tries to fix the issue by clearing out the font cache, which fixes the issue for some, but sadly, the fix is usually temporary.

Hopefully, the Google Chrome Development team is working on a solution for this, but unfortunately, from what I can tell in researching the issue, this problem has been in place for over a year and while it doesn’t affect Firefox, Safari or Opera, it doesn’t seem like there is any fix in the works by the Chrome team.

What people are looking for when they find this page: Jonathan Jeter, IwantedtouseGoogleChrometocreatethispost butIhadtouseSafari|byJonathanJeter Front-endWebDeveloper


    • says

      No problem. Thanks for your post. I found that I had to remove Helvetica from my font manager, as well, to avoid the conflict with FontBook, so I may have to do it again as other fonts show the same signs in Chrome. It would be easier if it was just fixed in the browser.

  1. says

    This has driving me crazy for a LONG time now and I JUST realized today it was because of FontAgent…that’s how I found your blog. Have there been any developments since you posted this?

    • says

      I haven’t had any new developments. I’m not really a Mac guy and my MacBook Pro was issued to me at work with a couple of font managers installed. Currently, I have to run the ./clearFonts script every time I start the machine, but it’s strange to me that Google wouldn’t fix the issue with Chrome, since it is the only program that seems to be affected. I’ll add any information I find to this post if I find a better solution.

  2. Kayle Simon says

    I use suitcase fusion and have had the same issue for a long while now; this is the first time I found any hint as to what is causing it. Thank you. What I really couldn’t figure out is why, if there was a problem accessing, say, helvetica, it didn’t just go on to Arial or whatever as specified in the CSS, but Chrome doesn’t think it’s having any problem; and THAT is a big problem.

What do YOU think? Let me know...