The opposite day I seen an odd factor had occurred with the title font on my private website. The place as soon as the glyphs had been clearly outlined by glowing outlines, instantly the outlines had been everywhere, bisecting the glyphs in odd methods.
My fast assumption was that it was a browser compatibility situation. In any case, I used to be utilizing the non-standard CSS property text-stroke.
h1 {
-webkit-text-stroke: 2px var(--accent);
text-stroke: 2px var(--accent);
}Though text-stroke is at the moment well-supported, it comes with a warning that there may very well be inconsistencies between browser implementations, and behavior may change sooner or later. I assumed that Firefox had modified its implementation. However a subsequent test revealed the bug was occurring in all browsers.
Christian Sonne recommended on Twitter that’s may very well be the font itself that modified and, certain sufficient, that turned out to be the case. On my private website I used to be utilizing Google Fonts through the embed code somewhat than self-hosting. That implies that, yep, Google might change the font at any time and I wouldn’t learn about it — one thing I hadn’t thought-about earlier than! As Killian Valkhof replied on Twitter:
Did you turn to/have a variable font? That is widespread for these, so the strokes can extra simply morphed.
Nonetheless, I’d anticipate browser to union/rasterize these earlier than including strokes. Hopefully quickly!
Certain sufficient, Google seem like upgrading a number of their fonts to variable fonts, in order that rationalization would make sense.
Do you have to self-host fonts?
There are various efficiency arguments for and in opposition to self-hosting fonts versus utilizing a third-party CDN. This text by Barry Pollard lays out lots of the professionals and cons for each approaches. Sia Karamelagos revealed a wonderful article on Making Google Fonts Quicker in 2022, however she recommends self-hosting for full management. The truth that the host can change the font in a single day with out you figuring out is yet another argument in favour of self-hosting!
I’d think about bugs like this are fairly uncommon, and sure, little doubt partly all the way down to utilizing a non-standard CSS property in my case. Nevertheless it’s undoubtedly persuaded me to host my very own fonts the place doable any further.
Webfont mills
Font Squirrel has a webfont generator software that features font subsetting, to assist generate as small a file as doable.
From Sia’s article I found google-webfonts-helper, which makes it even simpler to modify your Google fonts to a self-hosted model. Make sure to learn the article for hints and tricks to additional optimise your fonts utilizing the software.
