WordPress Font Optimisation: A Complete Guide
July 11, 2025
/ John Dwyer
Learn how to self-host Google Fonts for better performance and user experience
Understanding the Font Performance Issue
When you use Google Fonts on your WordPress site, each visitor’s browser downloads font files from Google’s servers. While convenient, this approach has some drawbacks:
File size concerns: Standard Google Font files typically range from 100-200KB per font family. When you factor in multiple weights (light, regular, bold) and styles (normal, italic), you might be loading 300-500KB worth of fonts alone.
External dependencies: Your site relies on Google’s servers being available and fast. Any delays or issues on their end affect your site’s loading speed.
Privacy considerations: Loading fonts from Google means your visitors’ browsers make requests to Google, which may have privacy implications depending on your location and audience.
Benefits of Self-Hosting Fonts
Self-hosting optimised fonts offers several advantages:
- Smaller file sizes: Optimised fonts can be 80-90% smaller than standard versions
- Faster loading: No external server requests needed
- Better control: You manage when and how fonts load
- Privacy compliance: No third-party requests to Google
- Reliability: Fonts work even if external services are down
Step-by-Step Implementation Guide
Step 1: Access the Google Webfonts Helper
Visit gwfh.mranftl.com – a free tool that provides optimised font files and ready-to-use CSS. This tool was created by Mario Ranftl, an experienced software engineer who recognised the need for an easier way to self-host Google Fonts.
Step 2: Select Your Font
- Browse the available fonts or search for specific ones
- Click on the font you want to use
- You’ll see all available weights and styles
Step 3: Choose Font Weights and Character Sets
Select only what you need:
- Choose 2-3 font weights maximum (e.g., Regular 400, Bold 700)
- For English sites, select “latin” character set
- Add “latin-ext” only if you use accented characters
- Avoid unnecessary character sets as they increase file size
Step 4: Download the Optimised Files
- Click “Download files” to get a ZIP archive
- The download includes:
- Font files in multiple formats (.woff2, .woff, .ttf, etc.)
- CSS code with @font-face declarations
- All files optimised for web use
Step 5: Upload Fonts to Your WordPress Site
Option A: Using WordPress Uploads Directory
- Access your site via FTP or cPanel File Manager
- Navigate to
/wp-content/uploads/
- Create a new folder called
fonts
- Upload all font files to
/wp-content/uploads/fonts/
Option B: Using Your Theme Directory
- Navigate to
/wp-content/themes/your-theme-name/
- Create a
fonts
folder - Upload font files there
- This method works well with child themes
Step 6: Add CSS to Your WordPress Site
Method 1: WordPress Customiser (Recommended for beginners)
- Go to Appearance > Customise > Additional CSS
- Copy the CSS provided by the font helper tool
- Update file paths to match your WordPress structure
Example CSS for uploads directory:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('/wp-content/uploads/fonts/open-sans-v18-latin-regular.woff2') format('woff2'),
url('/wp-content/uploads/fonts/open-sans-v18-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('/wp-content/uploads/fonts/open-sans-v18-latin-700.woff2') format('woff2'),
url('/wp-content/uploads/fonts/open-sans-v18-latin-700.woff') format('woff');
}
Method 2: Child Theme style.css (For developers)
Add the CSS to your child theme’s stylesheet using relative paths.
Step 7: Remove Existing Google Fonts
Check these locations:
- Theme settings: Look for typography or Google Fonts options
- WordPress Customiser: Check for font selection panels
- Plugins: Disable or reconfigure font plugins
- Theme files: Remove Google Fonts links from functions.php or header.php
Apply your new fonts:
body {
font-family: 'Open Sans', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
}
Step 8: Test and Verify
- Clear all caches (hosting, WordPress plugins, CDN)
- Check different pages to ensure fonts load consistently
- Test on mobile and desktop
- Use browser developer tools to verify fonts are loading from your server
- Run performance tests with tools like Google PageSpeed Insights
WordPress-Specific Considerations
Cache Management
WordPress sites often have multiple caching layers. After making changes:
- Clear your hosting provider’s cache
- Purge WordPress caching plugins (WP Rocket, W3 Total Cache, etc.)
- Clear CDN cache if using services like Cloudflare
Theme Compatibility
Some themes may have built-in Google Fonts that override your custom fonts. Check your theme’s documentation for font customisation options.
Plugin Conflicts
Page builders like Elementor or Beaver Builder may continue loading Google Fonts even after you’ve implemented self-hosted fonts. Check their settings for font options.
Common Issues and Solutions
Fonts not displaying:
- Check file paths in your CSS
- Ensure font files uploaded correctly
- Clear all caches
Old Google Fonts still loading:
- Check theme settings for Google Fonts options
- Look for remaining @import statements
- Verify plugins aren’t loading fonts
Performance not improving:
- Ensure you’ve removed all Google Fonts references
- Check that you’re only loading necessary font weights
- Verify caching is working properly
Understanding the Tool Creator
Google Webfonts Helper was developed by Mario Ranftl, a software engineer with over 10 years of experience in web development. The tool addresses a real problem: while Google provides excellent fonts, they don’t offer an easy way to download optimised versions for self-hosting. Mario’s solution has gained significant traction in the web development community, with over 12,500 stars on GitHub.
Expected Results
After implementing self-hosted fonts, you can typically expect:
- File size reduction: 80-90% smaller font files
- Faster loading times: Elimination of external requests
- Better performance scores: Improved ratings in speed testing tools
- Enhanced privacy: No third-party font requests
Best Practices
- Only include font weights you actually use
- Stick to 2-3 font weights maximum
- Always include fallback fonts in your CSS
- Use a child theme to preserve customisations
- Test thoroughly after implementation
- Monitor performance regularly
Remember that font optimisation is just one aspect of website performance, but it’s often one of the easiest improvements to implement with immediate results.