How To Add Custom Fonts To Your Divi Website

Typography has a strong effect on the overall aesthetic of a website and has tremendous power in expressing the tone of a brand or business. A great way to achieve a truly unique look and feel for a website is to make use of custom fonts.

Adding custom fonts to your WordPress and Divi website is relatively easy. It can be done by uploading a font to your website’s server and making use of the CSS3 property @Font-Face within your website’s stylesheet.

For this tutorial, you’ll need to access your website’s child theme, and add custom fonts to the theme directory, as well as edit code in the style.css file.

If you don’t have a child theme, you can create one in just a few seconds with the Divi Space child theme generator.

If you’re interested in reading about the differences between desktop and web fonts, as well as understanding a bit more about font formats, scroll down. Otherwise, click here to jump straight to the tutorial.

Understanding Typography And Its Role In Modern Web Design

In this section, we’ll be discussing a few type related principles that are likely to have an effect on your web development practices.

For a really thorough breakdown of typographical terminology, read this blog post from Elegant Themes.

What Is The Difference A Desktop Font and A Web Font?

While seemingly similar, there are differences between desktop and web fonts both in application, appearance and licensing.

While desktop fonts are designed to be installed on a computer for use in Office, Adobe or similar software to create traditionally print-based assets, web fonts are designed specifically for use in web pages in accordance with specific standards to ensure browser compatibility.

Web fonts are designed with subtle nuances in character makeup (spacing, contrast etc.), all which aim to optimize and enhance the font’s readability on screens, particularly at smaller font sizes.

The licensing between desktop and web fonts differs. Often license agreements are issued for use either in print or the web, not both. To use custom fonts in both environments, separate licenses must be purchased, either per font family or for individual font subsets.

When you begin the process of integrating custom fonts for a website, make 100% certain that you’re not using a desktop font by mistake, and that you are in possession of the appropriate license (either paid or free for use in specific instances) that suits your specific needs.

Understanding Font Formats

Fonts come in an array of formats, all of which have been created to serve different browsers.

TTF (TrueType Font) and its evolutionary counterpart OTF (OpenType Font) are the most common font formats specified. Support for the TTF and OTF format is pretty much widespread across the browsers, with the exception of Internet Explorer below version 9.0.

To accommodate for this, the font format EOT (Embedded Open Type) is used explicitly for IE versions 6.0 and above. The most widely accepted font format is the WOFF (Web Open Font Format), but again, it is unsupported by earlier versions of IE. Often the WOFF font format (and the newer WOFF2) is a bit difficult to come by, in which case the OTF and TTF formats are suggested for best practice.

For much more in-depth explanations of font formats, have a read through of these posts by W3 Schools and Creative Market.

If you’ve purchased or downloaded a font and require additional formats, use the Font Squirrel Webfont Generator to convert your font formats. (Make sure that the font licenses are valid).

Fall Back Fonts

A fallback font is specified as a backup font to ensure compatibility between browsers.

In the event that a particular user’s browser does not have the custom font on their browser, the fallback font will load in its place.

Web developers will often list a series of fallback fonts, ensuring that one of the universal fonts are set as fallbacks: Arial, Courier New, Georgia, Times New Roman and Verdana.

These fonts are considered 100% web-safe as they are intrinsic to both Windows and Mac operating systems.

Custom Fonts Vs. Google Fonts

If all of these technicalities are overwhelming, consider using a Google Font for your website.

With the exception of fewer variants in the font families and a less overall unique look and feel for a website, there are a number of advantages in using Google Fonts:

As Google Fonts files are stored on the Google server and are distributed by an international CDN (content delivery network), the speed of font delivery is often a slightly better, versus the load speed of a custom font stored on your individual server.

With the Google Fonts CDN, font files are cached and stored in a browser’s memory. With this, once a site user visits a website that has a particular font, it is loaded and stored in the browser cache and will load automatically for any additional website that makes use of the same font. This helps with site speed.

Embedding a Google Font on your website is slightly less effort than that of a custom font, and matters of cost, licensing, browser compatibility and formats are pretty much taken care of.

Finally, custom fonts come at an often high cost, while Google Fonts are 100% free, forever.

Tutorial: How To Add Custom Fonts To Your Divi Website

1. Find A Great Font

Even though adding custom fonts to a WordPress and Divi website does include a bit of code work, some might find that the greater challenge is actually deciding on which font groupings to select in the first place.

With thousands of fonts readily available in billions of different combinations, actually deciding on the best fonts for a website might be the hardest part.

To help you along with font decisions, have a look at Typespiration, Font Pair and Typecast.

Fonts can be downloaded/purchased from a number of sources, including:

 

A Few Notes on Purchasing Fonts:

  • While some fonts are free, others come at a cost, so be 100% certain of your brief, budget and design specifications.
    Not all free fonts are applicable for commercial purposes, so be sure to read through the font’s license agreement and abide by the specifications.
  • Most font stores will either sell fonts as full family packages (inclusive of all font variants) or as individual font subsets. These prices of the individual fonts will vary based on the intended application (i.e. print, web, app etc.) and often, pricing packages are broken down based on anticipated user views.
  • Font retailers will specify a particular price for a particular font application (i.e. print and design, web or app) and break these down per either page view or installations. Again, make sure that you’re 100% certain of your font choices as to keep costs down.
  • As a general unwritten rule, it’s best to not have more than three fonts loaded onto your site. Any more than this will cause your website to slow down and drive the price up.
  • Finally, in the event that you are creating a website which has particular language requirements, be sure to check the available special language characters within the font package.

2. Add The Custom Font To Your Child Theme Directory

Once you have downloaded your font, it’s time to upload it to your server. Again, if you are not using a child theme, you can create and download one using the Divi Space child theme generator.

If you’re working locally, the child theme folder will be located within your computer files. If you’re working on a live site, access the child theme files by using an FTP client (such as FileZilla or Cyberduck).

Once you’ve located your child theme directory (wp-content > themes > your-child-theme), create a new folder called ‘fonts’. Return to the downloaded .zip file containing your fonts, unzip the file and upload the fonts (in all relative formats).

3. Register The Custom Font In Your Style Sheet

Next, locate and open the style sheet within your child theme ( wp-content > themes > your-child-theme > style.css ).

Copy and paste the code below. Remember to change the font-family name and the path to reflect the location of your font from within the child theme.

Repeat this step until each of the fonts on your server have been registered.

@font-face {
    font-family: Muli-Regular;
    src: url(https://www.examplewebsite.com/wp-content/themes/your-child-theme/fonts/Muli-Regular.ttf);
}

With the Divi theme, the custom font won’t reflect in the text options panels anywhere within the Divi Builder. To set site-wide font settings with your custom font, do so with CSS (as below). Again, remember to update this based on your font-family name and design preferences.

 

h1 {
font-family: Muli-Regular, Arial, sans-serif;
font-size: 48px;
color: #464646;
}

h2 {
font-family: Muli-Regular, Arial, sans-serif;
font-size: 24px;
color: #464646;
}

p {
font-family: Muli-Regular, Arial, sans-serif;
font-size: 16px;
color: #d7d7d7;
}

Don’t forget to SAVE the changes made to the style sheet.

We hope that you’ve enjoyed reading this tutorial and that it has, or will, assist you in installing custom fonts on your Divi website.

Please feel free to share any comments or queries. We love receiving your feedback!

Thanks for reading!

Previous post
Next post

1 Comment

  1. bolivar

    Great Post, Understanding Typography to design compelling Web Design is very import, Divi is great and easy to customize, thank you for your great tips

    Reply

Submit a Comment

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