Hello Cameron,

Thank you for reaching out and sharing the details.

This issue happens most probably because the JavaScript that sizes the "Split Line Heading" sometimes runs before the font has fully loaded, causing it to render at the wrong size. Resizing the screen triggers it to adjust correctly.

To fix this, add the following CSS snippet to Salient > General Settings > CSS/Script Related > Custom CSS Code:

.nectar-split-heading[data-has-fit-text="true"]:not(.fitty-fit) {
    opacity: 0 !important;
}

This hides the heading until the correct size is applied, preventing the flash of oversized text.

Let us know if this resolves the issue.

Thanks,

Hi Cameron,

My apologies that the previous CSS didn’t resolve the issue, and thank you for your follow-up.

The “snapping” effect is caused by a timing issue, where the browser initially renders a default font before your custom font loads, triggering the resizing script and causing the snap.

Since the CSS fix wasn’t sufficient, a JavaScript solution will manually re-trigger the resizing script after the page has fully loaded.

Please remove the previous CSS and add the following code to your Salient > General Settings > CSS/Script Related > Custom JS Code box:

jQuery(window).on('load', function() {
    var $splitLineHeading = jQuery('.nectar-split-heading[data-has-fit-text="true"]');
    if( $splitLineHeading.length > 0 && typeof fitty === 'function' ) {
        // Short delay to ensure fonts have rendered
        setTimeout(function() {
            fitty.fitAll();
        }, 100);
    }   
});

Give this a try and let us know how it goes.

Thank you for your patience as we work to resolve this.

Best wishes,