A lot of people who visit my blog think the font has a pretty distinctive feel. To be honest, I only found it after seeing it on another blogger’s site.
The font itself comes from this open-source project: https://github.com/SolidZORO/zpix-pixel-font
In general, custom fonts are best kept under 2MB. Once they get too large, loading them becomes a problem in itself, haha. But I like this one too much to give it up. Even though a CDN can help speed things up, I kept debating whether I should remove the custom font altogether. After all, the font package is only 965KB, hehe.
Last night I stumbled across a post online about font rendering optimization, and it turns out there are two practical tricks that can make a real difference.
First, use @font-face{font-display:swap}. This helps reduce the time users spend waiting for text to appear. The page can show system fonts first, then switch over to the custom font a fraction of a second later.
Second, defining @font-face does not automatically trigger the font file to download. The browser only starts fetching it after it parses a DOM element that actually uses that font. If you want the font to begin loading earlier, use preload.
Add this between <head> and </head>:
<link rel="preload" href="yourfont.woff2" as="font" type="font/woff2" crossorigin>
Just replace the font URL with your own.
Using these two methods together really helps with slow font loading. I tested it, and the load time can be kept around 500 milliseconds, instead of the 1+ second I was seeing before, haha.