With site speed at the core of all things Trellis, we turned an eye towards fonts and how they load because it is a common issue in pagespeed tests. We wanted to make your website fonts and how they load an easy problem to solve.

Custom fonts take time to load when a reader visits your site.

They can also cause some layout shift (also known as Cumulative Layout Shift or CLS in Lighthouse) when loading on the page.

With Trellis settings you have the option to use a fallback font that will be served first, helping to eliminate fonts as a cause for slower site speeds or CLS.

There are two options for how you can load custom fonts in your Trellis settings.

You can find the Custom Font Loading Method settings under Appearance > Mediavine Trellis > Display.

>> Favor CLS Score:

If a websafe font loads before a custom font, the web safe font will be displayed for the duration of that page view

The Favor CLS Score option will help you to avoid the layout shift that can be caused when your custom font loads on the page. The web safe font will continue to be served, instead of changing over to the custom font. You will want to choose this option if you are trying to avoid additional CLS (Cumulative Layout Shift). This is the default setting and it is recommended.

>> Favor Custom Font:

If a websafe font loads before a custom font, the browser will switch fonts once the custom option loads. (This may occur 1-2 seconds later and can potentially cause layout shift)

With the Favor Custom Font option, you are able to always serve your custom font once it loads on the page. The drawback is that this can cause some layout shift. If you don't mind this potential hit to your CLS scores, and you prefer to always serve your custom font, this may be a good option for you.

If you're still unsure about which setting to choose, you can always email our team at trellis@mediavine.com.