WordPress Google Fonts & Font Awesome Slow Site Fix

Identify All Currently Used Fonts & Icon Sets

Before you can self-host, you need to know exactly which Google Fonts (families, weights, styles) and Font Awesome icon sets your site is using. Inspect your site's CSS (Developer Tools > Elements tab > Computed styles) or use a browser extension like "WhatFont" to identify font families. For Font Awesome, look for <i class="fa fa-icon-name"> elements and check the stylesheet source.

✓ ~10-20 minutes. Crucial first step to avoid missing fonts.

Download & Convert Google Fonts to Web-Friendly Formats

Go to Google Webfonts Helper. Search for each identified Google Font family. Select the specific weights and styles your site uses. Download the generated files. Ensure you select woff2 (for modern browsers) and woff (for broader compatibility). Create a folder like /wp-content/themes/your-child-theme/fonts/ and upload these files.

✓ ~15-30 minutes. Use only necessary weights/styles to keep file size down.

Add @font-face Rules to Your Child Theme's CSS

In your child theme's style.css file (or a custom CSS file enqueued by your child theme), add @font-face rules for each self-hosted font. This tells the browser where to find the font files. Crucially, include font-display: swap; to prevent FOIT and ensure text is visible during load.

@font-face{ 
  font-family: 'Your Font Name';
  src: url('../fonts/your-font-name-regular.woff2') format('woff2'),
       url('../fonts/your-font-name-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Prevents FOIT */
 }

@font-face{ 
  font-family: 'Your Font Name';
  src: url('../fonts/your-font-name-bold.woff2') format('woff2'),
       url('../fonts/your-font-name-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
 }

✓ ~10-20 minutes per font family. Test thoroughly after adding.

Self-Host Font Awesome (If Used)

If your site uses Font Awesome, download the Font Awesome Free/Pro package. Extract the contents. Copy the webfonts folder and the css folder (specifically all.min.css or fontawesome.min.css) into your child theme directory (e.g., /wp-content/themes/your-child-theme/fontawesome/). Then, enqueue the local stylesheet in your functions.php file and dequeue any existing external Font Awesome calls.

function wfhq_enqueue_local_font_awesome() {
    // Dequeue existing Font Awesome if it's loaded by theme/plugin
    wp_dequeue_style( 'font-awesome' ); // Common handle
    wp_deregister_style( 'font-awesome' );
    wp_dequeue_style( 'fontawesome' );
    wp_deregister_style( 'fontawesome' );
    // Add more dequeue handles based on your theme/plugins

    // Enqueue your locally hosted Font Awesome CSS
    wp_enqueue_style(
        'wfhq-font-awesome',
        get_stylesheet_directory_uri() . '/fontawesome/css/all.min.css',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'wfhq_enqueue_local_font_awesome', 99 );

✓ ~20-40 minutes. Prioritize dequeueing to avoid duplicate loading. This is key for fixing wordpress font awesome slowing site issues.

Remove All External Google Fonts & Font Awesome Calls

This is critical. Your theme or plugins are likely still enqueuing the external versions. You need to dequeue them. In your child theme's functions.php, use wp_dequeue_style() and wp_deregister_style() for known handles (e.g., google-fonts, lato-font, font-awesome). If your theme has a dedicated option to disable Google Fonts, use it. For stubborn cases, you might need to use output buffering to remove the <link> tags directly from the HTML output, but start with dequeueing.

function wfhq_remove_external_fonts() {
    // Google Fonts
    wp_dequeue_style( 'google-fonts' );
    wp_deregister_style( 'google-fonts' );
    wp_dequeue_style( 'theme-google-fonts' ); // Common handle for themes
    wp_deregister_style( 'theme-google-fonts' );
    // Search your theme's functions.php or plugin code for specific handles

    // Font Awesome (if not already handled in step 4)
    wp_dequeue_style( 'font-awesome' );
    wp_deregister_style( 'font-awesome' );
}
add_action( 'wp_enqueue_scripts', 'wfhq_remove_external_fonts', 100 ); // High priority to run last

✓ ~30-60 minutes. This step requires careful identification of handles. Clear all caches after making changes.

Preload Critical Fonts (Optional but Recommended)

For your most important fonts (e.g., your body text font), you can add <link rel="preload"> tags to your <head> to tell the browser to fetch them even earlier. This can be done in your functions.php file. Remember to specify crossorigin for font preloading.

function wfhq_preload_fonts() {
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/your-font-name-regular.woff2" as="font" type="font/woff2" crossorigin>';
    echo '<link rel="preload" href="' . get_stylesheet_directory_uri() . '/fonts/your-font-name-bold.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action( 'wp_head', 'wfhq_preload_fonts' );

✓ ~10-15 minutes. Only preload fonts that are absolutely critical for initial render.

Test and Verify the Fix

Clear all caching layers (server cache, CDN cache, WordPress caching plugins). Open your browser's Developer Tools (Network tab) again. Refresh your site. Confirm that there are no more requests to fonts.googleapis.com, fonts.gstatic.com, or kit.fontawesome.com. Check your PageSpeed Insights and GTmetrix scores to see the improvement in FCP, LCP, and overall load time. Ensure all text and icons display correctly.

✓ ~15-30 minutes. Don't skip this. Visual inspection and performance metrics are key.