Typography Options In Avada

01/07/2022

To give you full control over the fonts used on your website, there are quite a number of typography options in Avada. You can use standard font families, choose from the huge range of Google Fonts, or even upload your own Custom Fonts. From Global Typography sets and options, through to specific area options, like Main Menu Typography Options, Responsive Typography options, and even on-the-fly typography options in the Inline Editor, you will find typography options throughout Avada.

Read on to discover more about these Typography options in Avada, and watch the video below for a visual overview.

Overview

Global Typography Options

The Global Typography options are located in Avada > Options > Typography, and contain four tabs relating to the use of the site’s global Typography Sets, Body Typography, Heading Typography (H1-H6), and any Custom Fonts.

  • Global Typography – On this tab, you can create Global Typography Sets, which can then be applied in other typography global options as well as Element options. For typography on a new website, this should be your first stop.
  • Body Typography – To customize the Body Font, navigate to the Avada > Options > Typography > Body Typography, where all the Body Typography options such as font family, weight, size, etc. are found. This is also where you can set the Link Color for all text links throughout the site. This can be overridden on a Container by Container basis, at Container > Design > Container Link Color.
  • Heading Typography – To customize the H1 – H6 Headings, and Post Titles, including Single Post Title Extras such as “Comments”, “Related Posts or Projects” and “Author Titles”, navigate to the Avada > Options > Typography > Heading Typography where all the Heading and Post Titles Typography options are found.
  • Custom Fonts – Along with the new Typography options, you can also upload as many custom fonts as you want. You can upload custom fonts by navigating to the Avada > Options > Typography > Custom Fonts tab. If you’d like to learn how to upload custom fonts, please read our ‘Custom Fonts’ article.

Global Typography Sets

With this feature, you can create typography sets that you can then use from other Global and Element options. A typography set included the Font Family, a backup font, the variant, the font size, line height, letter spacing, and text transform. There are five default sets, Headings, Subheadings, Lead, Body, and Small, but you can rename these and create new sets as needed.

This feature will be partficularly useful on new sites. Here you can define the visual style of your typography sections, and then apply them to various other options, including the H1-H6 Headings, Body Typography and even Font options in Elements. in this way you can style your typography across the site in a way that if you make changes to your typography sets, theose changes ripple across the whole site.

For more details on this feature, please see the How To Use Global Typography Sets In Avada.

Global Typography Sets

Typography Option Settings

When setting global Headings or Body typography options, there are several settings to fully control the display of the font, including weight, size, color, and even backup font. Heading Typography, as seen below, has the additional options of setting top and bottom margins. These options are especially useful if you’d like to manually tweak your headings to fit your website better.

Font Family – Controls the font family to be used.

Backup Font – Controls the backup font family to be used in case the primary font doesn’t load correctly.

Variant – Controls the font weight and style to be used.

Font Size – Controls the size of the text on display.

Line Height – Controls the spacing between lines.

Letter Spacing – Controls the spacing between letters.

Margin Top – (Only in Heading Typography). Controls the top margin of the title.

Margin Bottom – (Only in Heading Typography). Controls the bottom margin of the title.

Text Transform – Controls the case for the text.

Font Color – Controls the color of the text.

General Typography Options
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada

Responsive Heading Typography

The Responsive Typography options allow you to control responsiveness for all headings and fonts. This helps your layout look more proportionate on smaller sizes.

Step 1 – Adjust the Responsive Typography Sensitivity by dragging the slider to fit your needs. 0 will disable responsive typography, and 1 is maximum responsiveness.

Step 2 – Adjust the Minimum Font Size Factor by dragging the slider left or right to control the multiplying value of the minimum font size. For example, if set to 0, then there is no minimum font-size. If set to 1 then the minimum font-size will be the same as the font-size of the element. If set to 2 then the minimum font-size will be double the initial font-size of the element.

Responsive Typography Options

Inline Editing Typography Options

There are also typography options found in Avada Live, when using the Inline Editor.

When you select any text in the front end builder, the Inline Editor appears above or below it. The very first option on the menu is Typography. On the Settings tab, you can adjust the settings of that particular paragraph of text, or you can also head to the Family tab, where you can change the font family and variant, for just that particular text selection.

Inline Editor Typography Options

Typography Performance Options

Font Face Rendering

Back in Avada 6.1, we improved the font performance feature for Font Face Rendering. Located at Avada > Options > Performance, you will find the Font Face Rendering option. Here you can now chose “Swap All” for faster font rendering with possible flash of unstyled text (FOUT), “Block” for clean rendering but a longer wait time until first paint, or “Swap Non-Icon Fonts”, which will use a mix of the first two methods (“swap” for text fonts and “block” for icon-fonts).

Font Face Rendering

Preload Key Fonts

There is also an option to make a selection to prioritize fetching resources that will be requested later in the page load. This improves page load time, as the browser caches preloaded resources so they are available immediately when needed. You can choose from All, Google Fonts, Icon Fonts, or None.

Preload Key Fonts
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada

Google & Font Awesome Fonts Mode

As part of the Privacy Settings, located at Avada > Options > Privacy, you will find the Google & Font Awesome Fonts Mode option. To allow you to be fully compliant with the GDPR, you can choose to download Google and Font Awesome Fonts locally on to your server, or you can set the option to CDN to use the Google and Font Awesome CDNs.

Google & Font Awesome Fonts Mode

Feature Specific Typography Options

To customize specific typography options, such as the Menu, Page Title Bar, Sliding Bar, Footer, and the like, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.

  • Main Menu Typography Options – Navigate to the Avada > Options > Menu > Main Menu panel, then go to the Main Menu Typography section. View here.
  • Flyout Menu Typography Options – Navigate to the Avada > Options > Menu > Flyout Menu panel. View here.
  • Secondary Top Menu Typography Options – Navigate to the Avada > Options > Menu > Secondary Top Menu panel. View here.
  • Mobile Menu Typography Options – Navigate to the Avada > Options > Menu > Main Menu panel, then go to the Mobile Menu Typography section. View here.
  • Page Title Bar Typography Options – Navigate to the Avada > Options > Page Title Bar panel, then go to the Page Title Bar Styling section. View here.
  • Breadcrumbs Typography Options – Navigate to the Avada > Options > Page Title Bar > Breadcrumbs panel. View here.
  • Sliding Bar Typography Options – Navigate to the Avada > Options > Sliding Bar panel, then go to the Sliding Bar Styling section. View here.
  • Footer Typography Options – Navigate to the Avada > Options > Footer > Footer Styling panel, then go to the Footer Typography section. View here.
  • Sidebars Typography Options – Navigate to the Avada > Options > Sideabrs > Sidebar Styling panel. View here.
  • Button Element Typography Options – Navigate to the Avada > Options > Fusion Builder Elements panel, then go to the Button Element section. View here.
  • Content Box Element Typography Options – Navigate to the Avada > Options > Fusion Builder Elements panel, then go to the Content Box Element section. View here.
  • Counter Boxes Element Typography Options – Navigate to the Avada > Options > Fusion Builder Elements panel, then go to the Counter Boxes Element section. View here.
  • Blog Meta Typography Options – Navigate to the Avada > Options > Blog > Blog Meta panel. View here.
  • Elastic Slider Typography Options – Navigate to the Avada > Options > Elastic Slider panel. View here.
  • Pagination Typography Options – Navigate to the Avada > Options > Extra > Pagination panel. View here.
  • Form Typography Options – Navigate to the Avada > Options > Extra > Form Styling panel. View here.
  • bbPress Typography Options – Navigate to the Avada > Options > bbPress panel. View here.
  • WooCommerce Typography Options – Navigate to the Avada > Options > WooCommerce > WooCommerce Styling panel. View here.
  • Events Calendar Typography Options – Navigate to the Avada > Options > Events Calendar > General Events Calendar panel. View here.
  • Events Single Post Typography Options – Navigate to the Avada > Options > Events Calendar > Events Single Posts panel. View here.
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada
Avada Website Builder

858,309 Businesses Trust Avada

Get Avada