Get a fast, conversion-focused WooCommerce theme in 2022. Switch to Shoptimizer.

Adding a custom font

It’s possible to use your own custom font files in the theme if you want something that’s not a Google font.

1. Install the child theme

We have a child theme available here. You’ll need to do some changes locally first.

Create a fonts folder in the child theme.

Fonts folder

We’re going to put our custom font into this fonts folder. For the sake of the example, I’m using Averta. There’s a ttf, woff and woff2 version of the font.

2. Edit style.css

Next, you’ll need to add some custom CSS within your child theme’s style.css file to reference this new font.

There’s a reference to local also. If the user happens to have the font already installed there’s no need to download it also.

Note that I’ve called the font-familly – averta – this is important.

3. Edit functions.php

Add the following code to the child theme’s functions.php file.

Again – note the references to averta in each place.

4. Apply it in the customizer

Now, when you edit a typography element in the customizer you should see this new font as an option in the dropdown. If you’ve done everything correctly it will render.

Averta output

This guide on the topic could also help.


Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!