Adding System Fonts

One of my pet peeves of late with Avada is the inability to use the system font stack as either the primary or backup font selection within the typography settings. I have submitted at least two feature requests and I know others have as well so hopefully, it will be coming soon. In the meantime, I have looked for a way to do it and think I have a simple solution. I have applied it to this site to see what is and is not impacted and will continue to test and this post will be updated to reflect necessary changes. As with everything of last it is CSS to the rescue. Before getting the CSS, within the typography settings I reverted everything to the Arial, Helvetica, sans-serifose option to remove any Google Fonts that may have been cached or downloaded.

Why are you doing this?

In case you are wondering why I am taking this approach, it is purely for performance. The browser doesn’t need to find your fonts, pull them from Google or another external source, it just loads instantly using the default font of your system. This can shave a few milliseconds from the load time. If you’re using a font service — Google, Adobe Font (aka typekit), or other similar services — if their servers are offline your users can get some strange results (e.g., Times New Roman). Another benefit is the GDPR issues that have arisen regarding hosted fonts — in particular Google Fonts. In their defense, the Theme Fusion team was ahead of the game and Avada allows you to host all the fonts on your website (Avada Global Options / Privacy Settings).

Won’t that be boring?

While using system fonts on every site could get a little monotonous, for sites that are just presenting information and don’t use typography as part of their content branding, it reduces cost and improves performance for your end-users.

The CSS

The CSS to make this happen is very simplistic taking advantage of CSS variables. As a result, you could use this approach to only target heading, body text, or everything.

UPDATE: Adding Avada elements — breadcrumb, toTop, and others — to the override list as needed.

:root{
  --system-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
}
h1,h2,h3,h4,h5,h6,p,li,dt,dl,dd,.fusion-button-text,.fusion-toggle-heading,.panel-body,.title-heading-tag,.fusion-breadcrumbs,.fusion-meta-tb,.fusion-top-top-link  {
 font-family:var(--system-font)!important;
}

Sadly, because of the way typography options are applied, the use of !important is required. This also means custom typography options also require a CSS entry and the use of !important to override this setting.

On another site I am working on, I have used this in conjunction with clamp() with great effect — testing on macOS, iOS, iPadOS, and Windows devices.