The Unintended Rebranding
It's not often I get to talk about overcoming technical challenges when it comes to building this website. Mostly these challenges involve me asking "how do I get the CSS to do this very basic thing", so that's probably the reason why.
I don't know why it took me so long to notice the problem. I mean, I knew the text on my site never looked quite right when I opened it on my gaming rig. Somehow I never caught it on my laptop, which is where I do most of my coding work. Perhaps it's just because Firefox is my go-to browser everywhere, and it wasn't until after I switched to a coding app with a live preview that I was able to recognize that anything was amiss.
But over the weekend, I asked myself the question, "Why does the text look a lot better in the preview than it does online?" First, I decided to try viewing the site in Edge. Edge was flawless. So this was a Firefox problem.
Very noticeable side-by-side. Click for the full-size image.
I tried to edit my CSS and include an instruction for Firefox to apply font smoothing. No dice. I found a bunch of Reddit posts with suggestions to edit some about:config settings; although this seemed to work pretty successfully for those users, it did not work for me. This took a few hours. I was ready to beat my head against the wall.
My "aha" moment came when I compared side-by-side again. I noticed that, seemingly, it wasn't all the text that wasn't being rendered the same. It was just the links—text which I have coded to be bold.
I share the good news with my troubleshooting buddy ChatGPT, along with information from a blog post I found, indicating that Firefox renders font-weight differently from Chromium-based browsers. It recommends checking that I'm importing font variations correctly. It gives me an example where it's importing a font with weights (thicknesses) of 400 and 700 (regular and bold). My code isn't doing that. So I run over to Google Fonts to see what my options are. I notice that the import code it offers isn't the same as the one I'm using, either. Why wouldn't I have just copied straight from Google Fonts? I couldn't tell you. But apparently I didn't.
Except that still doesn't work. I try something new, something that shouldn't matter. I've been linking to the font in the HTML file. What if I imported it in the CSS file instead?
Oh. Well that's new.
That is what my site's previous font (Arvo) actually looks like bold. Thick and chunky.
My best guess is, for whatever reason, importing the font via the HTML file only pulled in the regular font weight and nothing else. I was telling the browser I wanted the text bold, but the browser didn't receive any reference for that, so it shrugged and tried to wing it. And it appears that Chromium is just better at winging it than Firefox is. That's the discrepancy.
Sadly, even with this revelation, I still had another problem: Arvo only provides 400 and 700 font weights. I had no way of intentionally getting the font thickness I actually liked. It was all kind of a happy accident that I wouldn't be able to recreate.
I could have kept Arvo anyway, but that bold was just too chonky bold for me.
So today, we say hello to Zilla Slab, a variable-width font with more options for fine-tuning, and which I think is actually a bit easier on the eyes when in paragraph form. ...We also update all of our HTML files and start importing the font via CSS like we should have done from the start, but hey.
Plus, I really needed the excuse to touch up my favicon. That thing wasn't doing me any favors.