SplitType not working as expected in WebFlow project

[dongepulango]

I have no idea what's causing this bug. When i go to my page, sometimes it will split the lines correctly and sometimes it will split additional line. I get the bug 1 out of 10 if I do refresh, mostly when i first open the tab with the link.

Please help how can I prevent this. thanks

Correct:

With bug:

Here is the link: https://creatd-bb.webflow.io/

[beanduong]

It might have something to do with your font loading. Your font gets loaded after the DOM, so because the fallback font is wider than your own font, CURRENCY will cause a line break.

When I open your page for the first time, I get that behaviour. Afterwards, the font gets cached and loads with the DOM on refresh.

[lukePeavey]

It's rendering correctly every time on my end. Were you able to fix the problem?

I think it was probably due to font loading as @beanduong suggested.

[dongepulango]

It might have something to do with your font loading. Your font gets loaded after the DOM, so because the fallback font is wider than your own font, CURRENCY will cause a line break.

When I open your page for the first time, I get that behaviour. Afterwards, the font gets cached and loads with the DOM on refresh.

Any recommendation how to fix the problem? tried font-display: auto; and still the same. What I had before was font-display: swap;. Not even sure if that CSS will fix that problem.

It's rendering correctly every time on my end. Were you able to fix the problem?

Not yet, still testing it.

[beanduong]

CSS-Tricks has a good article on Flash of unstyled text (FOUT).

I have personally used webfontloader to wait for the fonts to be loaded, but the font style matcher approach looks good, too.
If you are using Nextjs, @next/font does the preloading for you.

[dongepulango]

CSS-Tricks has a good article on Flash of unstyled text (FOUT).

I have personally used webfontloader to wait for the fonts to be loaded, but the font style matcher approach looks good, too. If you are using Nextjs, @next/font does the preloading for you.

Thanks for the help, I will check it out. We are using Webflow for this project.

[lukePeavey]

Try setting the font family on the heading to system fonts and see if the problem still occurs. If this eliminates the problem, then it is definitely due to SplitType being called before your font has loaded.

[JonQuayle]

This is also something I have been experiencing for a while. I'm using Next js (13), even using the next/font package doesn't really solve this. It seems to be completely random also. For example, I reuse the hero design across my site, so the titles are very similar in length, same font style and size, 2 out of the 4 pages might be fine, but the other two will have one word on each line. Setting the font to system also has no effect.

[gogumai]

Hi @dongepulango , were you able to fix this? I'm also using Webflow and experimenting the same issue, thanks!

[suhaylmv]

CSS-Tricks has a good article on Flash of unstyled text (FOUT).

I have personally used webfontloader to wait for the fonts to be loaded, but the font style matcher approach looks good, too. If you are using Nextjs, @next/font does the preloading for you.

Thanks, this solved it for me. If I were you, I would create a troubleshooting section in the readme and include this, since it seems to be a common issue

[Abdox3]

A workaround is to lower the font size after splitting