Using custom fonts in WordPress Avada Theme

I love WordPress and I love the Avada Theme. Avada gives me tonnes of options to build a nice website in all my projects. But there is one thing that I don’t like: Fonts customization! In this post I will show you how you can replace the font theme wide.

Yes, Avada allows you to upload a custom font (eof, ttf, woff, svg), but it only uses these fonts at some places. For example, the body font family cannot be replaced, as well as in some other areas. After experimenting for a while, I developed this procedure to replace all fonts with my custom font. Here are the steps:

Step 1: Activate the Avada Child Theme (of course you should transfer your settings first (Avada -> Theme Options -> Backup).

Step 2: Upload your font files into the Child-Theme-Folder. In my case I created a folder named “fonts” and copied all font files into this folder (wp-content -> themes -> Avada-Child-Theme -> fonts).

Step 3: Go on your webserver (e.g. by FTP) and edit the style.css file inside the Avada Child Theme folder (wp-content -> themes -> Avada-Child-Theme). Add the following css code:

@font-face {
 font-family: 'Arial';
 src: url('fonts/helvetica.eot');
 src: url('fonts/helvetica.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('fonts/helvetica.woff') format('woff'), /* Moderne Browser */
 url('fonts/helvetica.ttf') format('truetype'), /* Safari, Android, iOS */
 url('fonts/helvetica.svg#svgFontName') format('svg'); /* Ältere iOS-Geräte */
}

Note: Of course you have to adjust the content, means the right path an the right file names. But do not replace the word “Arial”, because that is the trick.

Step 4: Open up the theme options again (Avada -> Theme Options -> Typography -> Standard Fonts). Here, select Arial as your standard font for everything.

There you go! You replaced everything.


Comments

5 responses to “Using custom fonts in WordPress Avada Theme”

  1. Ralf Longwitz

    This seems out of date now. Body font can be selected in Fusion theme options.

  2. You helped me a lot with this! Thanks :)

  3. very cool… so does this mean one could take the google font open sans and upload it so that font set is being server from my site and not having to make a call out to google for the font?

  4. That’s fucking great !

  5. tnx for your really usefull article.

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 128 MB. You can upload: image, audio, video, document, archive, other. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop files here