Home » Guides » Optimization » Wordpress Local Fonts
📌 Pin 🔗 Copy Link 📋 Copy Markdown ⬇️ Download
3 min read

Hosting Google Fonts Locally for Performance and GDPR

Using Google Fonts directly from Google's servers (fonts.googleapis.com) is convenient, but it comes with performance costs (DNS lookups, TLS handshakes) and privacy concerns (GDPR compliance regarding IP addresses).

Hosting fonts locally on your own server gives you full control over caching, compression, and preloading.

1. Why Host Locally?

  1. Performance: Eliminates round-trips to external servers. You can serve fonts from the same HTTP/2 connection as your HTML and CSS.
  2. Privacy: Google cannot track your visitors' IP addresses, making your site GDPR/DSGVO compliant without needing a consent banner for fonts.
  3. Control: You can aggressively cache the files and use advanced preloading strategies.

2. The Manual Method (Best for Performance)

While plugins like OMGF can do this automatically, doing it manually ensures you load only exactly what you need.

Step 1: Download the Fonts

Do not download the .ttf files directly from the Google Fonts website. They are not optimized for the web.

Use the Google Webfonts Helper tool.

  1. Select your font (e.g., "Inter").
  2. Select only the weights you need (e.g., regular, 700).
  3. Select Charsets: Usually latin.
  4. Copy CSS: The tool generates the @font-face CSS for you.
  5. Download: Get the ZIP file containing the optimized .woff2 files.

Step 2: Upload to WordPress

  1. Unzip the files.
  2. Connect to your server via FTP/SFTP.
  3. Navigate to your theme folder: /wp-content/themes/your-theme/.
  4. Create a folder named fonts.
  5. Upload the .woff2 files there.

Step 3: Add CSS

Paste the CSS generated in Step 1 into your theme's style.css. Update the file paths to match your folder structure.

/* style.css */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v12-latin-regular.woff2') format('woff2'); 
    font-display: swap; /* Crucial for LCP */
}

3. Advanced Compression & Subsetting

Sometimes, even the "optimized" files from Google are too large, especially if you are using Variable Fonts or fonts with massive character sets (like Noto Sans).

If your font file is over 50KB-100KB, you should compress it further using 3rd party tools.

The Problem with "Dynamic" or Variable Fonts

A Variable Font includes every single weight and slant in one file. While efficient, it can still be heavy if it includes Cyrillic, Greek, and Vietnamese characters that you never use.

Solution: Subsetting via Transfonter

Transfonter or Font Squirrel allows you to strip out unused characters.

  1. Upload: Upload your .ttf or .woff2 file.
  2. Subsetting:
    • Basic: Select "Latin" only.
    • Advanced: If you only use the font for headers (e.g., "HELLO WORLD"), you can type those specific characters into the "Characters" box. The resulting font file will be tiny (often under 10KB).
  3. Formats: Ensure "WOFF2" is selected.
  4. Convert: Download the new, ultra-lightweight kit.

Variable Font Note

If using Transfonter with Variable Fonts, ensure the tool supports preserving variable axes, or you might accidentally convert it into a static font.

4. Preloading Your Local Fonts

Now that the files are on your server, you must preload them to prevent render-blocking delays.

Refer to our guide on Advanced Font Optimization: Preloading Strategies to implement the <link rel="preload"> tag in your functions.php or .htaccess.

Created: March 17, 2026 • Last Modified: February 27, 2026