By Stephen Walker

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

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.