Font reloads on state change

[sepukus]

Not sure if this is related to https://github.com/styled-components/styled-components/issues/3345 , but in my case it seemed like a full page rerender on state change of a small component.

I've tracked it down to being the font is rerendering when a components state first changes - but is fine on subsequent state changes.

Some notes on the repro - I've used a sans font with a serif fallback to make the font rerender more obvious. Ive tried to load the font in a few different ways as a js import, a static path and just loading the font into a style tag not with SC. The first 2 ways it rerenders, loading the font in a style tag works as expected.

Also as with the linked issue: This happens in chrome not in firefox.

Reproduction

https://codesandbox.io/p/sandbox/wizardly-bhaskara-rpwcw5?file=%2Fpublic%2Findex.html%3A62%2C8

Steps to reproduce

Click on the button that says 'open dropdown' after first page load. It only happens once.

Expected Behavior

Fonts should not reload

Actual Behavior

Fonts reload after state change

[chanthinh]

Hi @sepukus, Can you move all your @font-face to style.css? Maybe it will works

[sepukus]

Hi @chanthinh I expect it would, as I have said if I load the fonts straight from css there is no reloading of the fonts. In my case I have several apps in a monorepo pulling from a shared component library so ideally it would be done through styled components. From the docs fonts should be loaded through injectGlobal which has been replaced with createGlobalStyle so I would expect the same from that.

https://styled-components.com/docs/api#deprecated-injectglobal