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


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

add-fonts-cpanel-file-managerStep 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

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

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


The Divi Summer Sale!

The Elegant Themes Biggest Discount Of The Year. Get 20% Off on Everything When You Join Today !.

You have Successfully Subscribed!