WordPress Font Optimisation: A Complete Guide

Search Blog

WordPress Font Optimisation: A Complete Guide

John Dwyer

Digital Strategist

July 11, 2025

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.

WordPress Font Optimisation: A Complete Guide