[Bug] FOUC (flash of unstyled content) occurs erratically, causes a layout shift prior to fonts loading/rendering correctly

[possumbilities]

Description

When the site is first loaded, there is a brief FOUC, which delays the proper rendering of the included font-files, icons, etc.. This results in a layout shift on first load.

Afterwards, the files are cached and this doesn't usually occur again, but it is something we should address.

Reproduction

1. Disable browser caching/reset cache
2. Visit creativecommons.org
3. See error.

Expectation

Site should load more smoothly on initial payload.

Screenshots

Resolution

• I would be interested in resolving this bug.

[Vanessa082]

I noticed that we already have a font-display: swap; rule in library-vars.css, which effectively handles fallback fonts quickly and replaces them with web fonts once they are loaded. I would love to contribute further to addressing the issue of Flash of Unstyled Content (FOUC). Based on what you've mentioned, I propose implementing a combination of optimizations that focus on CSS and font loading, along with general improvements for smoother initial rendering. @possumbilities

[possumbilities]

@Vanessa082 feel free to open a PR with your proposed improvements and we'll go from there!