SOLVED: Google Analytics Fonts Unreadable

June 7, 2017 - 3 minutes read

Google Analytics is an every day staple of our work. So you can imagine my frustration when one day I logged in and all the fonts were looking ultra-faint and almost illegible.

I’m unsure why this problem suddenly popped up — whether Google changed their fonts, or whether a recent change on my Macbook Air had resulted in the wrong alignment of the stars, but whatever the case it eventually drove me to the point where I *had* to solve it.

During my research, I discovered a number of other scenarios with various solutions. So it’s entirely possible that, if you’re also experiencing issues with the legibility of fonts in Google Analytics (or other Google products), there are other reasons for it. I won’t attempt to unpack them all here.

In my case, however, the simplest explanation actually was the correct one.

There was a problem with the display font.

When viewing Google Analytics in any of my browsers (Google Chrome, Safari, and Firefox) the fonts looked thin and faint.

By right-clicking on an affected font and clicking ‘Inspect’, I could check the CSS behind it all – it turned out the fonts were set to ‘Roboto, sans-serif’. And by removing Roboto from the CSS, I could see that it displayed beautifully using the sans-serif fallback font.

I then opened my Mac’s Font Book to check which fonts were installed. Roboto Bold Italic and Roboto Thin were active, but not Roboto Regular.

I suspect that this issue won’t affect someone who does NOT have Roboto on their computer, because Google provides the webfont to accommodate. But because I had certain weights of Roboto on my computer, the browser was not relying on the webfonts and was instead looking at my locally installed fonts.

As we subscribe to Adobe Creative Cloud and can sync any of their fonts on our computers, I jumped into to check on Roboto. It turned out, the Roboto Regular was already selected for sync to my computer and Roboto Thin was not. Hmmm…. what’s going on?

I then did a quick Google Search and found a downloadable TTF version of the same font. I installed it on my computer, removed the Typekit version of the same thing, and restarted my browser. With Roboto Regular installed properly on my local computer Google Analytics is happy again.

It appears that with a different weight of Roboto font installed on the computer (but not ‘Regular’ weight) the browser simply substitutes in another Roboto – in my case, this was ‘Thin’ and was near impossible to read. By ensuring that I had the Regular weight available, suddenly Google Analytics was legible again.

Now, on with my work!

Tags: ,