Google Fonts can update at any time

I guess that’s obvious. The styles of a site change when a CSS file is updated. An image is replaced when href is changed to point to one file instead of another. So, of course, a font is going to change if, say, the font file is updated.

It’s just something that hasn’t crossed, especially when that asset is served by Google. But that’s exactly what Michelle Barker discovered when the Google Font she uses on her personal site changed appearance one day.

See that? Michelle’s font went from seamless strokes to overlapping ones, the result of a variable font becoming more, well, variable. You see, variable fonts are these awesome font files that can be manipulated in CSS with the font-feature-settings property using values that correlate to different variable features. For example, a certain variable font might support slanting the characters:

.slanty-text {
  font-variation-settings: 'slnt' 10;
}

…where slnt is the font feature and 10 is the amount of slanting. What’s awesome about that is now I can italicize text for my custom web font without having to load an additional font file for that specific variation. Hence the “variable” in variable fonts. They adaptable in the sense that one file rules them all, saving the browser from having to slow down to download more font files.

What font features are supported is totally up to the font designer. So, whether Michelle was already using a variable font or the font she uses decided to go variable doesn’t matter — the font was updated. And because Michelle is fetching the font file directly from Google Fonts (something many of us do), the font on her site changed when the font file was updated over at Google Fonts.

Crazy. Obvious, but crazy to think the design of any website using a Google Fonts asset can change at any moment, without warning.

Michelle only realized this because she’s using a non-standard CSS text-stroke property to draw the outlines around the letters:

h1 {
  -webkit-text-stroke: 2px var(--accent);
  text-stroke: 2px var(--accent);
}

It’s crummy she had to find out about the issue that way, but it’s also good to know that Google Fonts are something we sorta “opt” into at a static point in time; they can update whenever. And so can our designs.

Ain’t no party like a third-party resource, right?