What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To preload a font in WordPress, add its actual font-file URL to the wp_preload_resources filter with as set to font, the correct MIME type, and crossorigin. Preload only the font file needed for text visible early on the page—not every font or a stylesheet that merely points to one.
Preload a local font with WordPress core
Add the filter in your theme or a site-specific plugin. Replace the example path with the font file your site actually serves:
add_filter( 'wp_preload_resources', function ( $preloads ) {
$preloads[] = array(
'href' => get_theme_file_uri( 'fonts/site-font.woff2' ),
'as' => 'font',
'type' => 'font/woff2',
'crossorigin' => 'anonymous',
);
return $preloads;
} );WordPress documents wp_preload_resources as the filter for adding resource preload directives; its supported resource fields include href, as, type, and crossorigin (WordPress: wp_preload_resources). Use a file path that matches your theme and format: for example, a WOFF2 file should have the MIME type font/woff2.
If the font is only used on certain templates, add the preload only on those pages. The right condition depends on the site; WordPress’s filter documentation does not establish one universal conditional pattern.
#1 Best Overall
Use the font file URL, not just the stylesheet
A stylesheet and a font file are different resources. Google Fonts returns CSS tailored to the requesting browser, and that CSS identifies the font file the browser should download. Preloading the CSS URL as though it were the font binary does not tell the browser to preload that font (Google Fonts API: Getting Started; Google Fonts: Technical Considerations).
To consider a font preload for a remotely hosted font, find the actual font-file URL in the returned CSS and confirm it is stable and accessible to your page. Otherwise, a local file gives you a direct URL to use in the preload. WordPress’s Font Library documentation says installed Google Fonts are downloaded and hosted on the site; it also supports uploading local TTF, OTF, WOFF, and WOFF2 files. Installing a font this way does not, by itself, establish that WordPress emits a preload (WordPress Font Library documentation).
Set the font preload attributes correctly
href: The URL of the actual font file, not the stylesheet that references it.as: Set tofont.type: Match the file format, such asfont/woff2for WOFF2.crossorigin: Include it for font preloads, including same-origin fonts. Browser guidance shows font preloads with this attribute (Chrome: Preload critical assets).
Preloading signals that the browser should fetch a resource early; it does not control how text renders while the font is unavailable. That behavior is controlled separately by font-display. Google Fonts exposes the setting through its display request parameter (Google Fonts CSS API).
Choose the right font and avoid unnecessary requests
Preload the specific file needed for text visible near the top of the page. If your site uses multiple weights, styles, or character subsets, identify the exact file used for that early-rendered text rather than preloading every variant. Excessive preloads can compete with other important resources (Chrome: Preload critical assets).
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Font setup | What you can preload | What to keep in mind |
|---|---|---|
| Local font file | The direct file URL, with font preload attributes | Use the exact file and limit the preload to pages that need it. |
| Third-party font stylesheet | The actual font-file URL identified by the CSS, if it is stable and accessible | The stylesheet URL is not the font binary; the browser-specific CSS leads to the font-file request. |
| Font installed through WordPress Font Library | The locally hosted font file, once you identify its URL | Font Library documentation describes hosting and uploads, not automatic preload output. |
For stylesheets, WordPress identifies wp_enqueue_style() as the primary API. Enqueuing a stylesheet is separate from preloading a font file referenced by that stylesheet (WordPress: wp_enqueue_style()).
Check the generated page after adding the filter
- Open a page that uses the font and inspect its rendered HTML. Confirm that it contains one preload pointing to the actual font file.
- In your browser’s developer tools, inspect network requests. Confirm that the font request succeeds and that the URL matches the file used by the page.
- Check pages and templates that do not use the font. Remove or condition the preload if it triggers requests for an unused file.
A 2021 WordPress Core Webfonts API proposal discusses the difficulty of preloading third-party fonts when WordPress has only a stylesheet URL rather than the font-file URL. It is background, not current documentation that establishes behavior for every WordPress release (WordPress Core: Webfonts API proposal).
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
