Follow us

Q2: Adding Custom Fonts with CSS | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

Here is another Quick Snack for you. Recently quite a few people have been having issues adding custom fonts with css to their Divi website instead of using a plugin. Geno wrote a great tutorial recently on adding new Google fonts but today I am going to show you how to add non-google fonts.

So let’s get cooking!

Ingredients

 

The Divi Theme or Divi Builder Plugin from Elegant Themes
Your chosen font files (.ttf, .otf, .woff or whatever format you will be using.)
FTP or cpanel access to create a new directory.

 

Cooking time

 

This should take you around 5 minutes max.

 

Preparation

 

The first thing we need to do is create a new directory to hold the fonts, this need to be in your child theme directory so ‘wp-content/themes/your-child-theme-name’. I prefer to use FTP to cpanel but the process is the same. Navigate to your child theme directory and create a new folder called ‘fonts’.

Adding custom fonts to divi with css

The open up the folder and upload your fonts.

Adding custom fonts to divi with css

 

Method

 

Now we need to load our fonts, so open up your child theme style.css file or navigate to Appearance>Editor and you will see it there. Paste in the following CSS.

/*---------- [Load The Fonts] ----------*/

@font-face {
    font-family: Aileron-Black;
    src: url('fonts/Aileron-Black.otf');
}

@font-face {
    font-family: Aileron-Thin;
    src: url('fonts/Aileron-Thin.otf');
}

 

You will need to change the font family and URL to match that of the fonts you are using.

Next we need to apply those fonts to elements of our website. As these are custom fonts you won’t see them in the font options in the theme customiser or any of the modules so if they are fonts you want to use as default across your site then we need to apply them to the headings, paragraphs and body with CSS.

Here is an example of how you might use them

/*---------- [Font Styling] ----------*/

h1 {
    font-family: Aileron-Black, Lato, sans-serif;
    font-size: 50px;
    color: #000000;
}

h2 {
    font-family: Aileron-Black, Lato, sans-serif;
    font-size: 40px;
	color: #000000;
}

h3 {
    font-family: Aileron-Black, Lato, sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 1.2em;
	color: #000000;
}

h4 {
	font-family: Aileron-Thin, Lato, sans-serif;
    text-transform: uppercase;
	font-size: 20px;
	color: #242424 !important;
}

h5 {
    font-family: Aileron-Thin, Lato, sans-serif;
    font-size: 18px;
	font-weight: 500;
}

body {
    font-family: Aileron-Thin, Lato, sans-serif;
    font-size: 16px;
    line-height: 1.2em;
}

p {
    font-family: Aileron-Thin, Lato, sans-serif;
    font-size: 16px !important;
    line-height: 1.2em;
}

 You can add and remove properties such as font weight and text transformation to get your desired styling. Once you are finished editing don’t forget to save.

It’s also a good idea to use fallback fonts just in case a particular browser has trouble rendering any of the fonts you have chosen, in the CSS above I have used ‘Lato’.

And that’s it, easier than you thought it would be eh?.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!