Duplicate CSS

Hi,

I have an issue with stylesheets.

Natively, GeneratePress loads the following CSS for H1:

h1 {
    font-size: 42px;
    margin-bottom: 20px;
    line-height: 1.2em;
    font-weight: 400;
    text-transform: none;
}

Using Customize > Typography tool, I changed it to:

h1 {
    font-family: Open Sans, sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    line-height: 1.2;
}

My issue is, that due to a difference in font size, my sites experiences a large CLS. As far as I could tell, the 42px H1 loads first, and my 2.5em H1 loads later causeing the layout shift.

I tried renegerating the CSS files via Customize > General settings and I purged cache. I know I could avoid the issue by inlining critical CSS and dequeing the stylesheet, but I don't think that's a very elegant solution. I use the inline critical CSS anyway, but the 42px overwrites it anyway during the load, and then my 2.5em reverts it back.

It's also worth noting that I use a child theme that has its own Style.css, but it doesn't contain H1 css.

Any ideas?