The other day I noticed a strange thing had happened with the title font on my personal site. Where once the glyphs were clearly defined by glowing outlines, suddenly the outlines were all over the place, bisecting the glyphs in odd ways.
My immediate assumption was that it was a browser compatibility issue. After all, I was using the non-standard CSS property text-stroke.
h1 {
-webkit-text-stroke: 2px var(--accent);
text-stroke: 2px var(--accent);
}Although text-stroke is currently well-supported, it comes with a warning that there could be inconsistencies between browser implementations, and behaviour might change in the future. I assumed that Firefox had changed its implementation. But a subsequent check revealed the bug was occurring in all browsers.
Christian Sonne suggested on Twitter that is could be the font itself that changed and, sure enough, that turned out to be the case. On my personal site I was using Google Fonts via the embed code rather than self-hosting. That means that, yep, Google could change the font at any time and I wouldn’t know about it — something I hadn’t considered before! As Killian Valkhof replied on Twitter:
Did you switch to/have a variable font? This is common for those, so the strokes can more easily morphed. Still, I’d expect browser to union/rasterize those before adding strokes. Hopefully soon!
Sure enough, Google appear to be upgrading a lot of their fonts to variable fonts, so that explanation would make sense.
Should you self-host fonts?
There are many performance arguments for and against self-hosting fonts versus using a third-party CDN. This article by Barry Pollard lays out many of the pros and cons for both approaches. Sia Karamelagos published an excellent article on Making Google Fonts Faster in 2022, but she recommends self-hosting for full control. The fact that the host can change the font overnight without you knowing is one more argument in favour of self-hosting!
I would imagine bugs like this are pretty rare, and yes, no doubt partly down to using a non-standard CSS property in my case. But it’s definitely persuaded me to host my own fonts where possible from now on.
Webfont generators
Font Squirrel has a webfont generator tool that includes font subsetting, to help generate as small a file as possible.
From Sia’s article I discovered google-webfonts-helper, which makes it even easier to switch your Google fonts to a self-hosted version. Be sure to read the article for hints and tips to further optimise your fonts using the tool.