Montserrat and -webkit-text-stroke overlapping

[andersson09]

You can see the issue by running https://www.html-code-generator.com/css/text-stroke-generator for Montserrat (a pretty popular font).

[BigPxl-Caleb]

Yup. This was working just fine three days ago and now a site that we use the font on is all goofy

[vtucker]

Same here on the main title: https://clearmortgage.com/meet-the-team

[amgdevelopers]

Yes this just happened to a client's website. All primary headings were using -webkit-text-stroke and now they are rendering this weird bug.

[RosaWagner]

Ah this is not a bug from the font, very much sorry.

We just onboarded an upgraded version of font that is now variable and it therefore keeps overlapping contours.
You can workaround this by downloading a static version of the font with merged contours and self host it: https://github.com/googlefonts/Montserrat/tree/master/fonts/ttf

You will find more answers in this issue: rsms/inter#292

[DamnGoodChris]

Was also having this issue.

I can also confirm that downloading the static font @RosaWagner linked and using that will fix the issue.

[thlinard]

A substitution would be to use text-shadow, like this:
https://codepen.io/thlinard/pen/ZEXVQyM

[enogael]

Load it like this (the static way): https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;400i;600;700;700i;800;900&display=swap

This is not working : "400: Invalid selector". You can't get the italics only with the weight axis range specified.

Even the old syntax https://fonts.googleapis.com/css?family=Montserrat:400;400i;700;700i&display=swap seems to load the variable font, because I'm still getting overlapping strokes.

So our only option here is to use a self-hosted static version ?

[diefl]

The following setup is working for me now:

using v15 of the font
embed fonts locally

[hogash]

Issue still happening with v23 .

[m4rc1e]

Alright, I've finally bothered to make a test case, https://jsbin.com/movowohesu/edit?html,output.

I'll open up an issue with webkit.

[hogash]

Thanks Marc and sorry, should've known better and provide a test case.

[m4rc1e]

No problem!

I understand this stuff is incredibly frustrating.

[jimmytherrien]

The following setup is working for me now:

using v15 of the font
embed fonts locally

How can I get the URLs for v15?

[786ihtisham]

I was using a URL that was overlapping the stroked text but thanks to @RosaWagner for sharing the solution :-). It worked for me.

[RosaWagner]

Since this is not a GF issue, I close it. If anybody have updates form webkit, please feel free to feed this thread.

[lcnogueira]

Just confirming here that using a self-hosted static version of the font and applying the stroke to it solved my problem with the Mulish font as well. Thank you, @RosaWagner 👍

[bogdanblazhkevych]

If you are like me and are still having this issue and the text shadow hack is not good enough, you can use

paint-order: stroke fill;

this changes the behavior a slightly, but it will give you a text stroke without the overlap.