You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WordPress站点谷歌字体过量加载引发Render-blocking resources问题,如何仅加载必要字体?

Hey there! Let's tackle this font loading issue step by step—cutting down on unnecessary Google Fonts will absolutely help reduce those render-blocking resources and speed up your site. Here's how to fix it:

Step 1: Check Your Theme's Built-in Typography Settings

Most modern WordPress themes let you control font loading directly from the Customizer. Start here—it's the simplest fix:

  • Go to Appearance > Customize > Typography (the exact menu name might vary by theme, look for "Fonts" or "Typography")
  • Locate where you've selected "Poppins" as your font family
  • Look for options to select specific weights/styles—uncheck everything except:
    • 300 (Regular) + 300 Italic
    • 500 (Regular) + 500 Italic
    • 600 (Regular) + 600 Italic
  • Save your changes and clear your site's cache. Test if the extra font requests are gone.
Step 2: Disable Theme-Autoloaded Fonts (If No Settings Exist)

If your theme doesn't give you granular control, you'll need to manually disable its default Google Fonts loading. Here's how:

  1. Find your theme's font handle:

    • Open Chrome DevTools (F12) > Go to the Network tab > Filter by "CSS"
    • Look for the Google Fonts CSS file (it'll look like fonts.googleapis.com/css?family=...)
    • Right-click the file > Copy > Copy link address
    • Then use a plugin like Query Monitor (or check your theme's code) to find the "handle" name used to enqueue this stylesheet (common handles are theme-google-fonts, twentytwenty-google-fonts, etc.)
  2. Add this code to your child theme's functions.php (or use a snippet plugin like Code Snippets to avoid losing changes when the theme updates):

    function disable_unwanted_google_fonts() {
        // Replace 'theme-google-fonts' with your actual font handle from step 1
        wp_dequeue_style('theme-google-fonts');
        wp_deregister_style('theme-google-fonts');
    }
    add_action('wp_enqueue_scripts', 'disable_unwanted_google_fonts', 99);
    
Step 3: Manually Load Your Trimmed Poppins Fonts

Once the theme's auto-loaded fonts are disabled, add only the styles you need. Use this optimized Google Fonts link (it includes exactly the weights/styles you specified, plus display=swap to minimize render blocking):
Add this code to your child theme's functions.php:

function load_custom_poppins_font() {
    wp_enqueue_style('custom-poppins', 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;1,300;1,500;1,600&display=swap', array(), null);
}
add_action('wp_enqueue_scripts', 'load_custom_poppins_font');
Step 4: Optional Host Fonts Locally (For Maximum Control)

If you want to eliminate external requests entirely, host the Poppins font files on your server:

  1. Download the required Poppins weights/styles (woff2 format is best) from Google Fonts
  2. Upload the files to a fonts folder in your child theme
  3. Add these @font-face rules to your child theme's style.css:
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 300;
        src: url('../fonts/poppins-v20-latin-300.woff2') format('woff2');
    }
    @font-face {
        font-family: 'Poppins';
        font-style: italic;
        font-weight: 300;
        src: url('../fonts/poppins-v20-latin-300italic.woff2') format('woff2');
    }
    /* Repeat for 500 and 600 weights, both normal and italic */
    
Step 5: Verify the Fix
  • Clear your site cache and browser cache
  • Run a new Google PageSpeed Insight test—you should no longer see unnecessary font files listed as render-blocking
  • Double-check your site's text to ensure all Poppins styles display correctly

内容的提问来源于stack exchange,提问作者imthemoisturizer

火山引擎 最新活动