Code Snippet

Season 1 - Episode 1

Divi Version: 2.4+

  • Difficulty

Easily Add Web Font to Divi Using @font-face Method

Typography is very important for web designers and developers. How you use it can really make a difference in your web site overall presentation. If you want to be creative, follow the next simple steps to easily integrate a web font in your next project:

Step 1:

Finding the font you want to add

  • In our example we will be using Museo web font that you can download at FontSquirrel

fontsquirrel-download-font

  • Download and extract the zipped file
  • In order to target correctly all major browsers, four different font formats must be installed: TTF, WOFF, EOT and SVG.

Step 2:

Backup your site

  • We strongly recommend that you backup your site before proceeding. We use the free wordpress plugin UpdraftPlus.

Step 3:

Use a Child Theme

  • We also strongly advice you to make customization of your website through a child theme. You can download and install our free child theme here.

Step 4:

Upload your Web Fonts

  • Using an FTP Client or your Cpanel File Manager, create a folder named “fonts” in your divi-child theme folder

add-font-folder-ftp

  • Upload the following web fonts to the “fonts” folder

add-fonts-cpanel-file-manager

Step 5:

Declare @font-face

  • In your child theme style.css file, copy and paste the following code. You are making the @font-face declaration here
@font-face {
    font-family: 'museo500';
    src: url('fonts/Museo500-Regular-webfont.eot');
    src: url('fonts/Museo500-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Museo500-Regular-webfont.woff2') format('woff2'),
         url('fonts/Museo500-Regular-webfont.woff') format('woff'),
         url('fonts/Museo500-Regular-webfont.ttf') format('truetype'),
         url('fonts/Museo500-Regular-webfont.svg#museo500') format('svg');
    font-weight: normal;
    font-style: normal;
}

Step 6:

Tell Divi Theme to use your new font

  • Now you must tell your child theme stylesheet to use the new web font In our case we will be using the font Museo to our <body> tag, but you can specify the tags you want, as for example h1, h2, h3, etc.
  • Copy and paste this code in your child theme style.css
body { 
font-family: 'museo500', Constantia, Helvetica, arial, sans-serif!important; 
}

And this is our final result. You are now using the new web font Museo in your Divi Theme.

 

final-result-add-museo-font-divi-theme