Quick Snack: Adding Custom Fonts with CSS

by | Feb 15, 2016 | CSS Tips & Tricks, Fonts

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

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. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. 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.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

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

You have successfully joined the waitlist!