Yes, ladies and gentlemen, this happened to me. And if you’re here, it probably happened to you as well.
While I was putting the blog together, all of a sudden, after a refresh, the font got messed up on Mozilla, which was my main browser. Was!
It went from looking like you see it now to looking like this:
As you can see, it was bold and fuzzy.
The weird thing was that it showed up like that only on Mozilla and only on my desktop PC.
It looked fine on my laptop and other devices. I even asked a friend to check it out, and it was fine on his end as well.
Troubleshooting and Contacting Support
I performed all the troubleshooting that I could think of, from minor to major:
- Checked the font with Inspect Element and everything seemed all right. Seemed! I’ll elaborate later on.
- Completely cleared the history since the beginning of time; 🙁
- Closed and reopened the browser;
- Started the browser in Safe Mode, without any add-ons and hardware acceleration on;
- Restarted Windows;
- Completely uninstalled Firefox, by the book, and performed a fresh install.
Nada! Nothing worked.
After running out of ideas, I asked for help on the Mozilla Firefox forum, which was a smart move because someone found out what’s causing this.
What Caused the Font to Break Only on Mozilla, Only on My Desktop
With whatever fonts I work on websites, I also download them and install them locally, in Windows, so I can use them in Photoshop when creating images and stuff.
For whatever reason, after working several days on the blog without any problems, Mozilla randomly decided to use the local font (instead of the one from Google Fonts) or create some sort of conflict with it.
This never happened before in all these years and it also didn’t happen right from the start, when I started working on the blog.
How to Fix the Broken Font
Basically, what you need to do is to delete the font from your OS.
I use Windows 10 on my desktop PC, so I’ll show you how to do it there.
The easiest way to access the fonts is to type in fonts in your Windows search bar.
The alternative is to go to Control Panel > Appearance and Personalization > Fonts > Preview, delete, or show and hide fonts.
Regardless of the method you choose, you need to end up here, where you have to select the font and click Delete.
After the font is deleted, clear any cache that you might have on Mozilla and check again. The problem should be gone.
The Troubleshooting Step That I Missed
Remember when I said that it seemed that the font is the correct one when I used Inspect Element?
Well, I looked in the right area, but not in the right spot. 🙂
And even if I would have looked in the right spot, I don’t know if the penny would have dropped.
In order to check this type of issue out, you have to:
- Right-click and select Inspect Element;
- Select the Fonts tab that’s on the far right;
- Click All fonts on page (this is the step I missed);
- Check the source of the font that appears messed up on your Mozilla Firefox browser.
In my case, the correct source for my Rubik font is Google Fonts.
When the font appeared broken because I also had it installed locally, System appeared instead of a Google Fonts link.
So, Google Fonts (or whatever source you know you have) is good, but System is not, because it means it loads them from your PC.
I don’t know how you can keep the font installed and not have a problem with it. Neither did the contributors on the forum.
You either have to delete the font or live with the problem.
Personally, I switched to Chrome after this issue, even if I’ve used Mozilla since forever.
To be honest, it’s better. There are some things I miss from Firefox, but overall, I started liking Chrome.
That’s a Wrap
Even though I thought this is one for the books and I would not figure it out because it was very strange, I managed to quickly find the solution, thanks to the Mozilla forum contributors.
If this happened to you too, I hope this post has helped you solve the issue.
If some info is outdated or incorrect, or you have anything to add, say or ask, please contact me via Twitter or email.