Custom Fonts


Typography options abound when using Avada. You can use standard font families, such as Arial, Helvetica etc, you can select from hundreds of Google Fonts, and if that’s not enough, you can upload custom fonts to use anywhere on your site. Read below to find out more.

For Avada Versions 4.0 or Higher

In Avada 4.0 or higher, you can now upload unlimited custom fonts to your site and assign them to any area of the site that has a font-family option. To learn how to upload and use custom fonts, please continue reading below.

How To Upload A Custom Font

Step 1 – Download the custom font you’d like to use and make sure you receive all 4 web font files; .woff, .ttf, .svg, and .eot. Each one is required.

Step 2 – Navigate to the Avada > Theme Fusion > Typography > Custom WebFont Panel.

Step 3 – In this panel, there will be a repeater field where you can upload each of the 4 web font files you’ve downloaded. For example, upload the .woff font file to the ‘WOFF’ field, and so on.

IMPORTANT NOTE: If you get an error when uploading your fonts, such as: ‘Sorry, this file type is not permitted for security reasons’, a solution to this is to temporarily add this line to your wp-config.php file:

Copy to Clipboard

If you are unsure how to do this, please seek help from your host.

Step 4 – Once you’ve uploaded all the required font files to their respective fields, click the ‘Save Changes’ button then refresh the page. After you refresh the page, you will now be able to select your new custom fonts. They will be listed under ‘Custom Fonts’ on any Font Family option dropdown.

Step 5 – To add another custom font, simply click the ‘Add’ button on the lower right side and repeat step 1 to step 4.

Step 6 – To delete a custom font, expand the custom font that you’d like to delete, then click the ‘Delete’ button.

For Avada Versions 3.9.3 Or Lower

Avada allows users to choose from any of the 500+ Google Fonts, the Standard System Fonts, and also allows you to upload a Custom Font. The Custom Font will be applied to the headings and menu. On our demo, we use a custom font called “Museo Slab”, we have the “300” version which is a paid version, but there is a “500” version which is free. Click Here To Download Museo Slab 500 Font. Make sure you are selecting the “Museo Slab 500” version, it is the only one that is $0. Or you can purchase the 300 version for about $17. Below you will find directions for how to use any custom web font. You will need to have the 4 required font files for the Custom font you want to use.

How To Use A Custom Font

Step 1 – First download your custom font and make sure you receive the 4 web font files, .woff, .ttf, .svg, .eot. Each one is needed.

Step 2 – Navigate to Appearance > Theme Options > Typography tab and you will see 4 Custom Font fields, one for each of the 4 font files listed above.

Step 3 – Upload the 4 individual font files into the corresponding field by clicking the ‘Upload’ button and selecting each file.

Step 4 – After you have uploaded all 4 custom font files, the custom font will be set for the headings and menu, and it overrides any of the other settings.

Step 5 – Make sure you click ‘Save’ to publish your new settings.