Font Size Jump on Product Title When Page Loads – How to Fix? (DAWN 15.4)

Technical Q&A
, , , ,

Topic summary

A user is experiencing a visual glitch on their product pages using the DAWN 15.4 theme. When pages load, the product title initially displays at an incorrect, larger size for approximately one second before snapping to the intended 23px size.

Key Details:

  • The issue creates a noticeable “jump” or flash of unstyled content (FOUC)
  • Screenshots demonstrate the size difference between the initial load state and final rendered state
  • An example product page URL was provided for reference

Current Status:

  • The question remains unanswered
  • The user is seeking CSS or HTML solutions to prevent this loading behavior and ensure the title renders at the correct size immediately
Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone!

I’m having an issue with my product page (DAWN 15.4 theme): when it first loads, the product title appears much larger for about a second, then jumps to the correct programmed size (23px). Is there a way to prevent this jump and make the title load at the correct size right away?

Here’s an example product page: Original Hand-Painted Tangerines Oil Painting – DrawWithDi

The screenshots below show what I mean.

Normal title appearance:

image
image1883×870 302 KB

Title appearance during the first second of loading:

image
image1879×875 301 KB

I’d really appreciate any advice or help!

2

Hi @DRAWandCARE

Think the issue is that CSS code is scattered and it first loads base.css, that have 40px for the title. Then in a few moments it loads, I guess from the theme.liquid a override of 23px.

If you are not sure where that 23px code line is find it in your theme code editor.
Then remove it

    <style>
  .product__info-container .product__title h1 {
      font-size: 23px !important;
  }
</style>

It should be this code.

Then you have a few options: you can open assets/base.css and find this line

@media only screen and (min-width: 750px) {
    h1,.h1 {
        font-size:calc(var(--font-heading-scale) * 4rem)
    }
}

and change it to

@media only screen and (min-width: 750px) {
    h1,.h1 {
        font-size:calc(var(--font-heading-scale) * 4rem)
    }
    .product__info-container .product__title h1 {
        font-size: 23px;
    }
}

or copy the same code to the end of /assets/section-main-product.css

The final option is to go to your theme customizer, choose the product page and product main info section, and in the Custom CSS block paste

    .product__title h1 {
        font-size: 23px !important;
    }

Note, this last one is the best in case of upgrade, but check if there is a delay. The first one should work the best.

1 Like
3

Hi! @Laza_Binaery
Thank you so much for your quick response and professional assistance!
I tried the first method, and it worked perfectly :star_struck:

I truly appreciate your help.
Have a wonderful day!