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:
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.
If your theme doesn't give you granular control, you'll need to manually disable its default Google Fonts loading. Here's how:
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.)
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);
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');
If you want to eliminate external requests entirely, host the Poppins font files on your server:
- Download the required Poppins weights/styles (woff2 format is best) from Google Fonts
- Upload the files to a
fontsfolder in your child theme - Add these
@font-facerules to your child theme'sstyle.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 */
- 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




