

*We no longer suggest using “Use Any Font” due to compatibility issues.* All elements selected will now show up as that font!Ĥ) “Use Any Font” Plugin (Not Recommended) Paste the CSS rules into the plugin, add any more you want and save! Click “Using fonts in CSS” at the upper left corner under “Selectors” and copy the example style Choose a few fonts to add to your account, sync them (if you want them on your local machine), and add to a kit Upload the TypeKit Fonts for WordPress Plugin For example, if I wanted the body to have the font titled “EXAMPLE”, copy the code in step 1 for the new font and add the CSS for the body:ģ) Typekit Step 1.

If you have different fonts for each header, repeat the steps as necessary. For example, if I wanted header 1 and 2 to have the new Google Font, we would use: Now assign the elements in the Divi Theme Options > General > Custom CSS. Go back to your Google Font page and scroll down to “ 4: Integrate the fonts into your CSS” and copy that code. Step 3. Assign the Font to Classes, Tags, and Elements Go to Divi Theme Options > Integration > and now paste the code into the head (not the body), and save. Click on the Quick Use icon, scroll down and copy the integration code. For this example, we chose “Great Vibes”. (Note: Make sure this is not a font already integrated with the Divi theme) Go to /fonts and choose a font that complements the style of your website. *This is our recommended way of adding fonts* Step 1. Click “upload” and follow the instructions Open the Divi Visual Builder and go to any design section that shows a font For all other fonts, you download the font to your servers and pull from your own FTP files.ġ) Upload Straight Into the Builder Step 1. On Google Fonts, the font is stored on Google’s servers and you use code to pull from their files.

The difference between using Google fonts vs. Adding fonts is a fairly easy process but scares many away due to the fact that there is some very minor, yet very simple, coding involved. Check out our top three ways to use custom fonts on your website!Īdding custom fonts to your website is a great way to stand out from the competition and add your own custom and creative flair to your site. In this tutorial we discuss how to add Google fonts and Non-Google fonts alike to your Divi website.
