Oxygen's Global Font Settings Cause CLS (Core Web Vitals)

[chris-castillo-dev]

Description of problem

Oxygen's global font settings only set a primary font and doesn't allow the user to set fall-back fonts. This creates a situation where a site's text loads with a system font until the global font can be loaded. This creates large shifts in text because font files need to be loaded.

Steps to reproduce the behavior:

1. Set a Global Font to Mulish
2. Add text to a page's above the fold content that uses the assigned Mulish font
3. Run a PageSpeed Insights report
4. A large CLS is reported
5. Scroll down to the diagnostics section of the PSI report and look for the toggle labeled "Avoid large layout shifts"
6. Expand toggle and you'll see that the text will be flagged.
7. Use the dev tools inspector to view the computed styles for that text element and you'll see that Oxygen assigns the font-family as:

font-family: 'Mulish'

and doesn't allow you to set the font-family like this:

font-family: 'Mulish', sans-serif;

[techjase]

+1

[johncrumpton]

The work-around for now is to open stylesheets and add a body { font-family: 'Mulish', sans-serif; }

[GladiatorMaximus]

The work-around for now is to open stylesheets and add a body { font-family: 'Mulish', sans-serif; }

@johncrumpton how do you handle e.g. Heading font Ubuntu and Paragraph text Montserrat?

[chris-castillo-dev]

The work-around for now is to open stylesheets and add a body { font-family: 'Mulish', sans-serif; }

@johncrumpton how do you handle e.g. Heading font Ubuntu and Paragraph text Montserrat?

We add the following to our stylesheet:

html body{ font-family: 'Mulish', sans-serif; }

html h1, html h2, html h3, html h4, html h5, html h6{ font-family: 'Montseratt', serif; }

Don't know if you absolutely need 'html' in the selector, but we do it and it's worked perfectly fine for us.

[gerogr]

+1