Home>>Website>>WordPress>>Avada Theme Review – Fonts (Typography) Options

Avada Theme Review – Fonts (Typography) Options

Ahmad Imran

I believe in educating and empowering my readers to make better decisions. REASONTOUSE platform is designed to provide you passionate, honest and real-life feedback around personal technology with a view to improve your user experience.

 

Last updated: 8th of February 2016. This article was first published in October 2015 but recently updated in line with the current version of the Avada theme – 3.9.3.

 

Choosing your WordPress theme is an important decision. I  suggest you to seek professional advice and expert opinion about the quality of code and theme mechanics. My reviews of the Avada theme are purely from personal user-experience perspective.


 

Use of fonts on your blog has a potential to make or break your blog design.

If I word it conservatively, it has a potential to differentiate an above-average design from majority of the average blog designs.

Derek Halpern of Social Triggers explained the psychology of using fonts in this simple article here.

And Dustin Stout wrote an excellent article on creating a stunning reading experience for your blog readers. He explained the use of fonts and typography in this article to create a pleasant design and reading environment for your blog visitors.

“Bottom line is that the choice and characteristics of the utilised fonts are important for a blogger.”

I use Avada premium theme for WordPress (current version 3.9.3) and the purpose of this article is to dissect it here to give you a flavour of the “fonts options” available within this theme.

With the help of 9 back-end snapshots from my Avada admin panel, you will be able to know exactly what this theme offers in terms of setting fonts for your blog. These snapshots are taken from the previous version of the theme however, they are still valid for the current revision 3.9.

This is the fourth article in this series. The first three reviews covered headers, footers and sidebars in Avada theme.

You are either a prospective buyer of this theme and curious to know about your typography options or you might just want to compare your present theme with Avada in terms of fonts and typography customisation.

Avada is an extremely customisable theme and one of the best sellers on Envato Themeforest. It is useful to compare it for different features against your dream WordPress theme in your mind.

 

 

How to Access “Fonts” in Avada Theme?

Go to “Theme Options” from Avada heading and then click on the “Typography” from the list on your left hand side.

You will be presented with a list of options within “Typography” to start working on your font selection and properties.

 

3 Main Sources of Fonts in Avada Theme

The first 3 options in the main window offer you a choice of fonts from the following 3 sources.

 

1) Custom Fonts

You might have downloaded a font of your choice from internet or probably have bought a premium font. Places like Font Squirrel and TypeKit offer various fonts to be used on your blog. You can upload the fonts under this option to be used in menu and headings of your website. Please note that you will need to upload all four files for a specific font you want to use (.woff, .ttf, .svg and .eof).

 

2) Google Fonts

My blog runs on freely available fonts by Google under “Google Fonts” option.

I use Oswald font for menus while Lato for everything else (body and headings etc.)

 

3) Standard Fonts

The last option available is for a standard set of font families that can be chosen from the list. These are the fonts which are commonly installed in your operating system or browser and are quicker to use. I found them to be common and limited in choice hence opted for the Google fonts for my blog.

Choosing a font for your blog is a critical decision.

It is not something that you will change frequently because it becomes a part of your theme and brand. An element of consistency and persistence is required to build your blog image and brand in the eyes of your returning visitors.

I suggest you to spend time and make a cautious decision to go for a set of fonts which is attractive, fitting and easy to read for your blog visitors.

 

Setting Font Details in Avada Theme

Avada gives you plenty of options to adjust fonts and typography details based on your needs.

The next 5 headings are precisely designed to serve this purpose.

 

1) Font Sizes

Under this section you can choose the size of your displayed fonts in various categories. You can decide if you want to use the built-in “responsive” option where displayed fonts are adjusted for sizes depending on the size of the screen they are displayed on.

This options allows you to change the default font size for various elements of your blog such as headings (H1, H2, H3, H4, H5 and H6), body font, menus (main and top menus, side menu and mobile menu etc.), titles and various others. Have a look at the full list in the snapshot below (snapshot from Avada version 3.8.8 but applicable to Avada version 3.9 as well).

 

2) Font Line Heights

Corresponding to the font sizes for different elements, this option allows you to choose the relevant line heights for each font. This is an important step to make sure that your fonts are displayed in an easy to read manner.

As an example, I have gone for a 22px font size for my main body text with a 33px line height which is exactly 1.5x the actual font size.

 

3) Font Weights

Fonts come in different weights.

As an example I use Lato font for my headings and the main text and it comes in 5 different weights.

Thin, light, normal, bold and extra bold.

You can see from the snapshot below that I have gone for a “thin” option for my main text, “normal” in menus and “ultra bold” for my headings.

Depending on which font you opt for, there is a possibility that you will have similar options available to you as well. Note that loading extra weights can have impact on your site loading speed.

 

4) Font Letter Spacing

This option allows you to change letter spacing of a selected font.

I am not sure about your requirements but I personally did not use this option at all. I opted for a regular spacing as a default which can be seen below.

 

5) Font Margins

For all heading types H1 to H6, Avada offers you an option to set top and bottom margins individually. This will be dependent on your individual theme and text settings.

I tend to leave these to default numbers. Have a look below of my font margins for each heading type.

 

Fonts Colours Selection

Font colour selection is not available under “Typography” menu.

You will need to go to the “Styling” menu to find this.

 

It makes sense to adjust font colours from the styling options where you can tweak other formatting as well. The snapshot above does not show the full list of fonts that you can choose your own colour of but the options are plenty. They are scattered under different headings. After a few minutes of playing around with this menu, you will be able to control almost all font colours used on your website.

I am impressed with the amount of control and customisation Avada offers to its users.

 

Font Options in Avada Theme – Wrap up

There is one minor gripe to mention.

Font options in Avada theme do not include an option to control the size of the “footer” font straight out of the box.

It picks up the “body” font characteristics.

I wanted this control as I believe that the font in footer should be slightly smaller than the main font. I agree that there might be a way to do it via CSS customisation but why not have this option in the menu?

I am sure if someone from Avada is reading this, they will bring this option to us in the next possible update.

Other than that, I am well satisfied.

It gives me plenty of control to make my site look and feel as I desire in terms of typography. I think that Avada team has done very well here to give the end-user an ultimate typography customisation experience via this theme.

If there is any specific area which I have not covered in this article or you want to know about any detail further, drop me a line below in comments and I will respond accordingly.

How does your theme compare to the font options provided in Avada theme?

Or, if are you a prospective buyer of this theme, do you think that it gives you a plenty of options to set your fonts according to your requirements?

 

2016-11-16T11:47:01+00:00 October 16th, 2015|Categories: Website, WordPress|Tags: , , , , |
  • Richard

    Hello Ahmad.
    Thank you again for these lovely and simple instructions :)
    I was wondering if you could explain me how to change the text font for my Toggles (used in my FAQ section). By Toggle I refer to the title, which will be the question or the FAQ Accordion.
    I installed the “TinyMCE Advanced” plugin, to change the text inside my toggle (the answer for the question) in the editor field. However, it doesn’t allow me to change the font for the Question itself.

  • Richard, my understanding is that the “toggle” font is set as “H4” in the built-in theme settings (unless you override it with custom CSS).

    So if you are not using H4 in your articles, you can change H4 characteristics from the fonts menu and see if it makes a difference. Alternatively, even if you are using H4 in your articles, can you afford to change it slightly to work with your “toggles” as well?

    Do let us know if it worked? :) I am on a learning curve as well as I have used this specific situation on http://www.reasontouse.com/faq/ and found that the font is too big. So trying to make it a bit smaller.

    Thanks again for liking the articles and I am glad you get something out of them. Keep in touch. What is your site name by the way?

  • Richard

    Woow… you are a genius! It worked and it didn’t affect any other content as they are assigned to another Heading (H).
    I am currently working with a team of 3, on a new business project “travel-cache.com”. However, it is currently in “under construction” mode as we are refining parts of the website :)
    – It should be up and running very soon.
    I am really grateful for your support and time and I am referencing this site to everyone with the same problems!

  • Great news. Thanks for spreading the word too. Good luck with your project and if you need any other help, do let us know. Cheers

  • Joe

    How do I have same custom font for desktop and mobile?

  • Joe as far as I understand, if properly uploaded, the custom fonts works for mobile and desktop both. They just come up as an “available” font in the list the same way as any other Google Font.

    You then need to select them in relevant parts. Say body font under main “typography” option. And sidebar fonts under “sidebar” option tab.

    Please let me know if this is how you understand it and if it worked for you.