Let’s explore how to manually add Google Fonts to your WordPress site. Although we’ll use Google Fonts as an example, this method can be applied to any font.
Step 1: Select the Perfect Font for Your Website
Begin by visiting the official Google Fonts website to browse a comprehensive list of trending fonts.
You can filter fonts using the options on the left side or search for a specific font directly.
Step 2: Add Your Chosen Fonts to Your Collection
Once you’ve selected a font, you’ll see the various styles it offers.
You can customize the font size before adding it to your collection.
Step 3: Download the Font Files
After selecting your font, it’s time to download the files. Your chosen fonts will appear in the selected family, and you can download them as a ZIP file containing all font weights.
I suggest downloading only the essential font weights, such as:
- Regular
- Italic
- Bold
Extract the ZIP file and delete any unnecessary font weights.
Preview the responsive settings while editing the options to ensure accuracy.
Step 4: Convert the Font to WOFF Format (If Necessary)
Google Fonts typically provides fonts in TTF format. However, for better cross-browser compatibility, it’s advisable to use WOFF or WOFF 2.0 formats.
If your font isn’t in WOFF format, you can use the free Convertio tool to convert it.
Step 5: Upload the Font Files to Your Server
Next, upload the font files to your server via FTP or cPanel File Manager. If you need help with this, refer to our guide on using FTP with WordPress.
For example, you might create a ‘fonts’ folder in your site’s root directory, as shown in the screenshot.
Step 6: Add CSS for Font Face
Now, it’s time to use the fonts in your site’s CSS. For instance, to apply the Roboto Regular font to all body text, use this CSS:
body {font-family: ‘roboto-regular’, Arial, sans-serif;}
You can add this CSS in the same location as the previous code.
Step 7: Apply the Font to Your Site
After uploading the font files, you must include them in your site’s CSS using the @font-face rule.
You can do this through the Additional CSS tab in the WordPress Customizer or a plugin like Simple CSS. Here’s the necessary CSS code:
@font-face {
font-family: ‘roboto-regular’;
src: url(‘https://your-site.com/fonts/Robot-Regular.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
Be sure to:
- Replace ‘roboto-regular’ with your chosen font’s name.
- Update the URL to point to the correct font file on your server.
Repeat this process for each font file you intend to use.
Step 8: Prevent Your Theme from Loading Google Fonts
If your site continues to load fonts from Google Fonts, your theme might still be set to use them.
If it supports that option, you can resolve this by switching your theme to a system font stack. For example, in GeneratePress, you can make this change in the WordPress Customizer.
Alternatively, you can remove the relevant code from your theme’s functions.php file or use a child theme to override it.
To stop Google Fonts from loading in the Divi theme:
- Go to the WordPress dashboard and open the Divi tab.
- Find the Theme Options menu and disable the “Use Google Fonts” and “Google Fonts subsets” options.
For Elementor, navigate to the plugin’s Settings menu, open the General tab, and click the “Disable Default Fonts” option. If Google Fonts still load, you must use a code snippet to disable them entirely.
