Code Snippet

Season 1 - Episode 1

Divi Version: 2.4+

  • Difficulty

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

We are Divi Experts!

We turn your vision into reality


We analyze and discuss your ideas


Come up with a strategy that fits your needs and budget


You will get a modern, responsive and intuitive website


New website will elevate your business, your brand and your sales

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


  • 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


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


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.



SOURCE: Divi Creative