Split text before font render issue
Hey guys,
Hoping someone can help me out.
My Problem: Split text is being applied before my font has actually rendered in the browser which results in abnormally large letter spacing. My assumption is the fallback font is being used for the split text calculation prior to my imported fonts being rendered in the browser (thus, when my fonts are rendered, they're not formatted correctly). I'm 90% sure this is the cause of my issue, although let me know me if otherwise! The
If you need the text without waiting the whole page load you may check if the fonts / fonts are loaded as follows:
document.fonts.load('1rem "Martel"').then(() => {
document.fonts.load('1rem "Work Sans"').then(() => {
initsplit();
})
})
