Custom fonts can make your Divi website stand out and better reflect your brand’s personality. By default, Divi offers a robust library of fonts through Google Fonts, but there may be times when you want to use a unique font from Adobe Fonts or even your own custom font files. This tutorial will guide you through adding custom fonts to your Divi website and applying them to your design.
Why Use Custom Fonts in Divi?
Fonts play a critical role in establishing the look and feel of a website. Custom fonts can:
Enhance your website’s branding.
Improve readability and user experience.
Make your website look unique and professional.
Divi makes it easy to use custom fonts, whether from Google Fonts, Adobe Fonts, or font files (.ttf, .otf, .woff).
Step 1: Adding Google Fonts to Divi
Google Fonts are integrated directly into Divi, so adding them is a straightforward process.
1. Open the Divi Builder
Go to your WordPress dashboard, navigate to the page or post where you want to apply the font, and click Enable Divi Builder.
2. Access Module Settings
Choose a module where you want to apply the font, such as a Text Module or Blurb Module. Click the Settings icon.
3. Choose a Google Font
In the module settings, navigate to the Design tab.
Open the Text section and look for the Font dropdown menu.
Scroll through the list or use the search bar to find your desired Google Font.
4. Apply the Font
Select the font and customize its weight, style, size, and color. Save the changes to see the updated design.
Step 2: Adding Adobe Fonts to Divi
Adobe Fonts (formerly Typekit) offers a vast library of premium fonts. To use them in Divi, follow these steps:
1. Get Your Adobe Fonts API Key
Log in to your Adobe Fonts account.
Navigate to the Web Projects section and create a new project.
Add the fonts you want to use to this project.
Copy the unique API key for the project.
2. Add the API Key to Divi
Go to your WordPress dashboard.
Navigate to Divi > Theme Options.
Click on the Integration tab.
Paste the Adobe Fonts API key into the relevant field.
Save the changes.
3. Use the Fonts in Divi
The Adobe Fonts you’ve added will now appear in the font dropdown menu in the Divi Builder. You can apply them to any text element, just like Google Fonts.
Step 3: Uploading Custom Font Files to Divi
If you have a custom font file in .ttf, .otf, or .woff format, you can upload it directly to Divi.
1. Prepare Your Font Files
Ensure you have the necessary font files ready. It’s recommended to include multiple formats (.ttf, .woff, etc.) for better browser compatibility.
2. Upload the Font in Divi
Go to your WordPress dashboard.
Navigate to Divi > Theme Options.
Click on the Builder tab and select Advanced.
Scroll down to the Custom Fonts section and click Upload.
Upload your font file and give it a name.
Save the changes.
3. Apply the Custom Font
Open the Divi Builder and navigate to the module where you want to use the font.
Go to the Design tab and open the Text section.
Select your custom font from the dropdown menu.
Step 4: Using Custom Fonts with CSS
If you want more control over how your custom fonts are applied, you can use CSS to style your website.
1. Upload the Font to Your Website
Upload your font files to the Media Library or a custom folder via FTP. Note the URL of the uploaded files.
2. Add Custom CSS
Go to Divi > Theme Options > Custom CSS and add the following code:
@font-face {
font-family: 'CustomFontName';
src: url('your-font-file-url.woff') format('woff');
}
body {
font-family: 'CustomFontName', sans-serif;
}Replace CustomFontName with the name of your font and your-font-file-url with the actual URL of your font file.
3. Apply the Font
Use CSS classes or selectors to apply the custom font to specific elements.
For example:
h1, h2, h3 {
font-family: 'CustomFontName', serif;
}Tips for Using Custom Fonts in Divi
Check Licensing: Ensure you have the right to use the font on your website. Some fonts require a commercial license.
Optimize Font Files: Use tools like Font Squirrel to optimize your font files and reduce their size, improving website performance.
Test Cross-Browser Compatibility: Make sure your fonts display correctly in all major browsers, including Chrome, Firefox, Safari, and Edge.
Fallback Fonts: Always specify fallback fonts in your CSS to ensure your website remains readable if the custom font fails to load.
For example:
body {
font-family: 'CustomFontName', Arial, sans-serif;
}Conclusion
Adding custom fonts to your Divi website is an excellent way to elevate your design and create a unique user experience. Whether you’re using Google Fonts, Adobe Fonts, or your own custom font files, Divi provides multiple options for seamless integration. By following this guide, you can confidently implement custom fonts and ensure your website stands out while maintaining performance and compatibility.
Start experimenting with custom fonts today to bring your vision to life!
