Typography Options In Avada

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 Avada.
Read on to discover more about these Typography options in Avada, and watch the video below for a quick overview.
Overview
Global Typography Options
Typography Options SettingsFeature Specific Typography OptionsResponsive Heading Typography
Inline Editing Typography Options
Typography Performance Options
Google & Font Awesome Fonts Mode
Heading Font SizesFeature Font SizesFont Line HeightsFont WeightsFont Letter Spacing,Global Typography OptionsThe initial Global Typography options are located in Avada > Options > Typography, and relate to the global use of the site』s Body Typography, Header Typography (H1-H6), and any Custom Fonts.
Body Typography Options – 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.Headers Typography Options : H1-H6 – To customize the Headers, Post Titles including Single Post Title Extras such as 「Comments」, 「Related Posts or Projects」 and 「Author Titles」, navigate to the Avada > Options > Typography > Headers Typography where all the Headers 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.,Typography Option SettingsWhen setting global Headers or Body 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.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Feature Specific Typography OptionsTo 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.,Responsive Heading TypographyThe 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 OptionsThere 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.,Typography Performance OptionsFont Face RenderingBack 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).
Preload Key FontsThere 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.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Google & Font Awesome Fonts ModeAs 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.,Heading Font SizesHeading Font Size for H1Page Title Bar – Affects the font size of titles inside all Page Title Bars. View a sample here.Title Element – Affects the font size of text set to H1 inside all Title Elements. View a sample here.Heading Font Size for H2Tagline Box Element – Affects the font size of titles inside all Tagline Box Elements. View a sample here.Content Box Element – Affects the font size of the titles inside all Content Box Elements. View a sample here.Flip Box Element – Affects the font size of the Frontside Heading inside all Flip Box Elements. View a sample here.Title Element – Affects the font size of text set to H2 inside all Title Elements. View a sample here.Heading Font Size for H3Pricing Table Element – Affects the font size of titles inside all Pricing Table Elements. View a sample here.Modal Popup – Affects the font size of titles inside all Modal Popup windows. View a sample here.Title Element – Affects the font size of text set to H3 inside all Title Elements. View a sample here.Heading Font Size for H4Flip Box Element – Affects the font size of the Backside Heading inside all Flip Box Elements. View a sample here.Person Element – Affects the font size of the Name Option inside all Person Elements. View a sample here.Person Element – Affects the font size of the Title Option inside all Person Elements. View a sample here.Popover Element – Affects the font size of titles inside all Popover Elements. View a sample here.Recent Posts Element – Affects the font size of titles inside all Recent Posts Elements. View a sample here.Tabs Element – Affects the font size of titles inside all Tabs Elements. View a sample here.Toggles Element – Affects the font size of titles inside all Toggles Elements. View a sample here.Title Element – Affects the font size of text set to H4 inside all Title Elements. View a sample here.Image Rollover – Affects the font size of titles on all Image Rollovers. View a sample here.FAQ Titles – Affects the font size of titles on all FAQ items. View a sample here.Heading Font Size for H5Sharing Box Element – Affects the font size of titles inside all Sharing Box Elements. View a sample here.Title Element – Affects the font size of text set to H5 inside all Title Elements. View a sample here.Heading Font Size for H6Title Element – Affects the font size of text set to H6 inside all Title Elements. View a sample here.,Feature Font SizesBody Font Size – Affects the font size of all text within your website that does not have a special, custom option. View a sample here.Main Menu Font Size – Affects the font size of all navigation or menu items on your website. This does not include submenu items. View a sample here.Main Menu Dropdown Font Size – Affects the font size of all submenus of menu items on your website. This includes mega menus. View a sample here.Secondary Menu & Top Contact Info Font Size – Affects the font size of all text in the top bar when using Header designs #2 – #5. View a sample here and here.Side Menu Font Size – Affects the font size of all sidebar navigation items on your website. View a sample here.Mobile Menu Font Size – Affects the font size of menu items in mobile devices.Breadcrumbs Font Size – Affects the font size of breadcrumbs inside all Page Title Bars. View a sample here.Sidebar Widget Heading Font Size – Affects the font size of all sidebar widget headings on your website. View a sample here.Sliding Bar Widget Heading Font Size – Affects the font size of all Sliding Bar widget headings in your sliding bar. View a sample here.Footer Widget Heading Font Size – Affects the font size of all footer widgets in your footer. View a sample here.Copyright Font Size – Affects the font size of copyright text on the very bottom of your website. View a sample here.Post Titles Font Size – Affects the font size of titles inside all Blog and Portfolio Posts. View a sample here and here.Post Titles Extras Font Size – Affects the Comment, Related Posts, Related Projects and Author Titles inside all Blog Posts. View a sample here, here and here.Header Tagline Font Size – Affects the font size of headlines in the top menus found in Header design #3. View a sample here.Meta Data Font Size – Affects the font size of all meta data on your website. View a sample here.Page Title Font Size – Affects the font size of titles inside all Page Title Bars. View a sample here.Page Title Subheader Font Size – Affects the font size of subheaders inside all Page Title Bars. View a sample here.Pagination Font Size – Affects the font size of all paginations on your website. View a sample here.WooCommerce Icon Font Size – Affects the font size of the add to cart and details on your shop page. View a sample here and here.,Font Line HeightsHeading Font Line Height for H1Page Title Bar – Affects the font line height of titles inside all Page Title Bars. View a sample here.Title Element – Affects the font line height of text set to H1 inside all Title Elements. View a sample here.Heading Font Line Height for H2Tagline Box Element – Affects the font line height of titles inside all Tagline Box Elements. View a sample here.Blog Post – Affects the font line height of titles inside all Blog Posts. View a sample here.Portfolio Post – Affects the font line height of titles inside all Portfolio Posts. View a sample here.Content Box Element – Affects the font line height of titles inside all Content Box Elements. View a sample here.Flip Box Element – Affects the font line height of the Frontside Heading inside all Flip Box Elements. View a sample here.Author Title – Affects the font line height of the Author Title Heading inside all Blog Posts. View a sample here.Related Posts – Affects the font line height of the Related Posts Heading inside all Blog Posts. View a sample here.Leave A Comment – Affects the font line height of the Leave A Comment Heading inside all Blog Posts. View a sample here.Title Element – Affects the font line height of text set to H2 inside all Title Elements. View a sample here.Heading Font Line Height for H3Pricing Table Element – Affects the font line height of titles inside all Pricing Table Elements. View a sample here.Modal Popup – Affects the font line height of titles inside all Modal Popup windows. View a sample here.Title Element – Affects the font line height of text set to H3 inside all Title Elements. View a sample here.Heading Font Line Height for H4Flip Box Element – Affects the font line height of the Backside Heading inside all Flip Box Elements. View a sample here.
Person Element – Affects the font line height of the Name Option inside all Person Elements. View a sample here.
Person Element – Affects the font line height of the Title Option inside all Person Elements. View a sample here.Popover Element – Affects the font line height of titles inside all Popover Elements. View a sample here.Recent Posts Element – Affects the font line height of titles inside all Recent Work Elements. View a sample here.Tabs Element – Affects the font line height of titles inside all Tabs Elements. View a sample here.Toggles Element – Affects the font line height of titles inside all Toggles Elements. View a sample here.Title Element – Affects the font line height of text set to H4 inside all Title Elements. View a sample here.Image Rollover – Affects the font line height of titles on all Image Rollovers. View a sample here.Heading Font Line Height for H5Sharing Box Element – Affects the font line height of titles inside all Sharing Box Elements. View a sample here.Title Element – Affects the font line height of text set to H5 inside all Title Elements. View a sample here.Heading Font Line Height for H6Title Element – Affects the font line height of text set to H6 inside all Title Elements. View a sample here.Body Font Line HeightDefault Body Content – Affects the font line height of all text within your website that does not have a special, custom option. View a sample here.Secondary Menu Line Height
Top Menu Headline – Affects the font line height of headlines in the top menus found in Header design #3. View a sample here.,Font WeightsSelect Body Font Weight – Affects the font weight of all text within your website that does not have a special, custom option. View a sample here.Select Menu Font Weight – Affects the font weight of all navigation or menu items on your website. This does not include submenu items. View a sample here.Select Headings Font Weight – Affects the font weight of all headings on your website. View a sample here.Select Footer Headings Font Weight – Affects the font weight of all footer headings on your website. View a sample here.Select Button Font Weight – Affects the font weight of all button texts on your website. View a sample here.,Font Letter Spacing
Heading H1 – H6 Letter Spacing – Affects the letter spacing of all H1 – H6 Headings on your website.
Menu Letter Spacing – Affects the letter spacing of all navigation or menu items on your website. This does not include submenu items. View a sample here.Button Letter Spacing – Affects the letter spacing of all button texts on your website. View a sample here.