RT Cunningham


System Fonts and Unicode Characters Instead of External Web Fonts

system fontsThe Google Search Console recently reminded me of why I should optimize with system fonts and Unicode characters instead of pulling in external web fonts. They added “Speed (experimental)” under “Enhancements”. Every one of my web pages were marked as having “moderate” speeds instead of “fast” speeds.

The only issue is FCP (first content paint) being longer than 1 second. Unless you take the steps I’ve taken, you will never get a faster FCP.

System Fonts Instead of External Fonts

Yes, Google Fonts and other font services can make your website look consistent across multiple web browser and operating systems. No, your website doesn’t have to look consistent. It just has to look good natively on web browsers and operating systems. This is where system fonts come in.

These are the system fonts (the CSS font-family) I’m now using:

-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, “Noto Sans”, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;

This is the same font stack WordPress has been using since version 4.6 (they’re now on 5.3) with one exception. I have “Noto Sans” before Ubuntu” because some Ubuntu derivatives have it installed (including the Linux Mint version I’m using now) even if they don’t use it as a default. It looks better to me than the Ubuntu font.

Unicode Characters

All the icons I now use are either HTML entities or Unicode characters. These are the open and close icons:

☰ ☰
❌ ❌

These are the author, date and category icons:

👤 👤
📅 📅
🗁 🗁

These are the arrows at the bottoms of the articles:

« «
» »

I didn’t replace the share icons with icons. I replaced them with hyperlinks. I’m probably the only person who ever clicks on them anyway.

The Result

According to WebPageTest, my pages now have an FCP of less than a second. Google can take up to a month to check them all, but I only need a few in the “fast” category to know I’ve been successful.

If any of the icons look “off”, please let me know. If they don’t work for everyone, I need to do something else.

November 23 Update

On second thought, I replaced all the icons with text, except for the arrows at the bottom.

Share: Facebook | Twitter

By RT Cunningham
November 20, 2019
Web Development