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 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 the theme.
Read on to discover more about these Typography options in Avada, and watch the video below for a quick overview.
Global Typography Options
The initial Global Typography options are located in Avada > Typography, and relate to the global use of the site’s Body Typography, Header Typography (H1-H6), and any Custom Fonts.
Typography Option Settings
When setting global typography options, there are several settings to fully control the display of the font, including weight, size, color, and even backup font family. Headers 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. Take note that these options accept em units instead of pixel units.
Font Family – Illustrated as A. Controls the font family to be used.
Backup Font Family – Illustrated as B. Controls the backup font family to be used in case the primary font doesn’t load correctly.
Font Weight and Style – Illustrated as C. Controls the font weight and style to be used.
Font Subsets – Illustrated as D. Controls the font subset to be used.
Font Size – Illustrated as E. Controls the size of the text on display.
Line Height – Illustrated as F. Controls the spacing between lines.
Letter Spacing – Illustrated as G. Controls the spacing between letters.
Margin Top – Illustrated as H. (Only in Headers Typography). Controls the top margin of the title.
Margin Bottom – Illustrated as I. (Only in Headers Typography). Controls the bottom margin of the title.
Font Color – Illustrated as J. Controls the color of the text.
Feature Specific Typography Options
To customize specific typography options, such as 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.
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.
Inline Editing Typography Options
There are also typography options found in Fusion Builder 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.
Font Face Rendering
With Avada 6.1, we improved the font performance feature for Font Face Rendering. Located at Avada > Theme Options > Performance > General, 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 “nlock” for icon-fonts).
Google & Font Awesome Fonts Mode
As part of the Privacy Settings, located at Avada > Theme 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.