0

There are some documented issues with Google Fonts where specifically many variable fonts don't play with with -webkit-text-stroke.

The font that is discussed primarily on github et al. is Montserrat and while someone did provide some static Montserrat files as a quick fix, I am finding there are many more fonts with this issue beyond just that one.

The text renders with little cross lines all over the words (see picture).

While I understand there are other ways to attempt to create text-strokes, they won't work for me, so not looking to re-invent the wheel as far as the CSS part goes.

Certain Fonts have cross-lines in them when adding -webkit-text-stroke

The solution seems to be to just self-host the static versions of the fonts.

However, I have tried to find where to download the static versions of the fonts, but they don't seem to be available via Google Fonts.

I have read others post about merging contours of the variable font which I guess means making it static again? Is there a tool out there where you can just convert the variable font to static or perform this "countour merge?"

Or is there a way to download the static versions from Google and I just don't know it? (note I don't mean a static URL, I mean the static version of the font.)

CRAIG
  • 977
  • 2
  • 11
  • 25
  • 1
    That's a WebKit bug: it should. be detecting the contour overlaps and providing an outline of the glyph without the overlaps. Merging contours is not the same as deriving a static instance font, though there might be some tool out that removes overlaps when deriving a static instance. – Peter Constable Dec 24 '22 at 04:09
  • @PeterConstable Thanks for commenting Peter. When I wrote this I was confused mainly because I downloaded the static fonts as many have suggested and they do have the same issue. Had me wondering what made a font static and variable. I assume now that if I download the Montserrat 800 font it must be static as a variable font is all one single file right? – CRAIG Dec 24 '22 at 15:32
  • A variable font has glyph outline data as well as other delta data describing ways that the glyph outlines can change. A variable font also has an 'fvar' table that specifies one or more axes of design variation, with numeric ranges for each axis. When a value for each axis is selected, then a specific instance of the variable is selected. When I referred to "deriving a static instance", that means selecting an instance and then exporting the resulting glyph outlines. If the default outlines have overlaps, then the outlines for a specific instance probably also have the same overlaps. – Peter Constable Dec 24 '22 at 16:44
  • Yes, a variable font is a single file. – Peter Constable Dec 24 '22 at 16:45
  • @PeterConstable Yeah, now I understand it. What was confusing me was when I switched to the static font, it didn't make any difference, so I was rather confused as others said using the static font would resolve the overlapping issue. That still has me confused. However, I ended up going with this solution: https://stackoverflow.com/questions/69253420/text-stroke-webkit-text-stroke-css-problem/69937834#73226502 which I thought could be dicey, but turns out it works pretty well. Thanks again for your help. – CRAIG Dec 26 '22 at 15:10

0 Answers0