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.