Code Snippet

Header

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
SOURCE: Divi Creative