The gibberish you see in Chrome is likely indicative of a font issue, specifically with the Roboto font.
The Roboto font conflict issue mostly plagues designers because designers are constantly activating, deactivating, and importing fonts, which can lead to font duplicates and font conflicts.
Recently, I opened Chrome and realized all my Chrome system text was gibberish!
Fortunately, there is a quick and easy solution. To fix the gibberish text on my Mac’s Chrome, I went into FontAgent and deactivated the typeface Roboto. In my case, I had duplicate fonts turned on, all with the name Roboto. Immediately after deleting the duplicate Roboto fonts, Chrome started displaying its system Roboto text correctly, again.
Google Chrome’s font-family is Roboto
So, why does this easy font deactivation fix work? The reason is that Google uses the Roboto font by default in its applications. If you look at Chrome’s Dev’s tools to see what font family the browser is trying to display, you’ll see that the gibberish text is supposed to display as Roboto.
The CSS for the text that showed as gibberish: font-family: Roboto, system-ui, sans-serif /* system-ui represents the default UI font on a given platform */
So, why does this font-stack use system-ui?
In a nutshell: performance. Using system-ui can boost site performance because the browser uses a system font and therefore doesn’t have to download a font file. In this case, Roboto is indeed a system font, but I had multiple instances of Roboto active on my machine. This font duplication caused a font conflict and made Roboto display as strange characters in the Chrome browser.
Is using system-ui in a CSS font-stack good practice? I genuinely don’t know. There seem to be varied opinions on this topic. In 2017, the article “Never, ever use system-ui as the value of font-family” discusses other people having similar font conflict issues due to system-ui declarations. From personal experience, I can think of several times similar font issues have happened, and I bet if I were to explore deeper, these font display issues also link to a system-ui declaration and likely font duplication conflicts.
How to delete duplicate fonts on Mac
Macs come with Font Book (found in Applications) and include a one-click solution for removing font duplicates. Open Font Book and click Edit > Look for Enabled Duplicates…
Choose to Resolve Automatically or Resolve Manually. I chose manually and deleted the Microsoft fonts, opting for Apple’s included version of those same fonts.
As a side note: Historically, FontAgent has been my font manager of choice, as it automatically synced my Adobe projects with the fonts required by each project. There does not appear to be an out-of-the-box way to remove duplicate fonts in my version of FontAgent. However, once installed, FontAgent does prevent users from creating new duplicates.
Instead of font duplication deletion, in FontAgent, users can toggle specific font activation to on or off. Toggling activation off for a duplicate font solves most conflict issues.
Download Roboto from Google Fonts
Are you looking for the Roboto font file? Roboto is part of Google Fonts. If you don’t yet have Roboto on your computer, you can get a copy for free from Google Fonts. Use Google Fonts to serve and display Roboto on your website or download the font file to your computer for use in local applications.
When might this Google Chrome trick work?
- Checking for a duplicate Roboto font might be a solution if your text is unreadable in Chrome and other Google services.
- Removing duplicate Roboto fonts or deactivating duplicate Roboto fonts might be a fix for your Chrome text woes if restarting your computer, restarting Chrome, and even reinstalling Chrome does not solve your Chrome text display issues.
- Addressing your Mac’s Roboto font duplicates might work when you are having text display issues in Chrome and have already tried turning off extensions, updating your browser, and clearing cookies and caches.
- Deactivating duplicates of the Roboto font on your computer might solve problematic text in Chrome, especially if “switching off the hardware acceleration” hasn’t solved your issue.
Good luck, and happy text wrangling!
If this fix resolved your Chrome text issues, please tell us in the comments. Have another way to fix the problem? Share away!