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

Instructions

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

final-result-add-museo-font-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!