WooCommerce landing page font flickering

[lsl]

Seeing some font flickering on hard refresh, happens more during navigation too. Also seems to happen on the address step.

https://user-images.githubusercontent.com/811776/152071320-294272d0-adfb-4273-a772-766347a82087.mp4

Maybe just me? Maybe just Firefox? Maybe wider issue?

• [ ] Time box some investigation

[obenland]

Discussed in State of the Board (p1643923720673059-slack-C029UPVMGTW)

Might be a component re-render issue, something in our state loading maybe

[allilevine]

I'm seeing similar behavior on the Domains page so it might be an issue with the EmptyContent component:

https://github.com/Automattic/wp-calypso/blob/3f8fead1d88f4dc549d8c6179b5fd759c2ce1bdd/client/components/empty-content/index.jsx#L102

[lsl]

I wonder if it's related to the ref, we added that to the empty component recently and would explain the connection.

https://github.com/Automattic/wp-calypso/blob/3f8fead1d88f4dc549d8c6179b5fd759c2ce1bdd/client/components/empty-content/index.jsx#L53

[allilevine]

I wonder if it's related to the ref, we added that to the empty component recently and would explain the connection.

I tried reverting it but didn't see a change. 🤔

[allilevine]

I think this might be related to loading the Recoleta font. I can only reproduce it in Firefox.

[allilevine]

@Automattic/team-calypso This seems to be a wider issue related to loading the Recoleta font in Firefox. See: p1644518273250019-slack-C03DY3RJ5 Is this something you can help us with?

[noahtallen]

It looks like this is how Recolatta is loaded across most (if not all) of Calypso:

https://github.com/Automattic/wp-calypso/blob/a83f9acf2b30fc352da61669616f280df655134b/packages/typography/styles/fonts.scss#L3-L9

So by default, the browser only attempts to download the font after it gets used by a rendered element.

But honestly, based off the description, maybe it's a Firefox bug? Maybe a solution would be to add <link rel="preload"> in the HTML for the font file. Unsure what the impact would be for performance since Recolatta isn't used everywhere. But maybe it would avert Firefox's weird behavior in this case

[lsl]

since Recolatta isn't used everywhere.

Likely going to change soon. https://github.com/Automattic/wp-calypso/issues/58293#issuecomment-1009651810

[allilevine]

Likely going to change soon. #58293 (comment)

@SaxonF Is there an issue for this font simplification plan? It sounds like always loading Recoleta would solve our Firefox problem. 😄

[SaxonF]

@allilevine I don't believe there is yet. Might be something we can propose in the #dotcom-system Slack channel

[noahtallen]

You could experiment with adding a link tag in this component to see if that fixes the issue: https://github.com/Automattic/wp-calypso/blob/f2e6f88ae65c8571bbac21b284c29b48ec987598/client/components/head/index.jsx#L22-L28

[lsl]

            <link
                rel="preload"
                href="https://s1.wp.com/i/fonts/recoleta/400.woff2"
                as="font"
                type="font/woff2"
                crossorigin="anonymous"
            />
            <noscript>
                <link
                    href="https://s1.wp.com/i/fonts/recoleta/400.woff2"
                    as="font"
                    type="font/woff2"
                    crossorigin="anonymous"
                />
            </noscript>

Tried this, didn't prevent rerender (Though I wonder if you mean to also disable the existing import?)

A few things around the web hint that dynamically styled components might be triggering this.

[noahtallen]

Though I wonder if you mean to also disable the existing import

good question. Though I didn't mean that, it seems like it could theoretically solve the issue if the root problem is FF trying to download the file a bunch of times