UPDATE
Avada 7.7 added support for system fonts. This article is for those that have not, or cannot, update it. Be forewarned that the addition of system fonts did not include the addition of font weights. You will need custom CSS.

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.

Originally published on March 13, 2022

close up photo black Android smartphoneIt's the Little Things
close up photo black Android smartphoneIt's the Little Things Part 2

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022