SplitText Widows with Specific Font

[trackpad 9 Likes (Newbie)]

Sorry, I don't think I can recreate this in a CodePen unfortunately - so I am just looking for general advice / tips things to check before I move on. Just loosing some sleep over it.

 

I am applying animations to lines here. I can only say this is an issue at certain page widths and/or breakpoints...for some sentences, some of the time. The site is built using Tailwind. I have checked for borders or other weird layout issues.

The issue is resolved by changing from Noto Sans to any other font. Noto is a widely used font available from Google Fonts. There are surely other fonts that would trigger the same issue ...but it's the only one in my quiver that does. I tested 3 others and they work fine.

 

So I guess I am writing to hear if anyone has experienced anything similar with a different font or what I might check / enable / disable to debug further. Very strange!

[Cassie 5,649 Likes (Superhero)]

Heya!

 

Maybe you need to wait for your custom font to load? Give this a pop -
 

document.fonts.ready.then(function () {
  // do the thingsss
});

 

[trackpad 9 Likes (Newbie)]

Thanks, Cassie – but everything is already loaded... it's a next.js project where these fonts are fetched and cached locally, ...there is no FOUT or anything to indicate that would be the issue.

Since posting this, I moved to another font which works better, stylistically... so I won't hopefully need to sweat it anymore. 😅 I can't imagine it is anything specific to the charset of noto ...but if anyone else experiences anything I hope they can chime in here. Thanks again for the suggestion. 🙏