You can host custom fonts in WordPress by registering font files in a compatible block theme’s theme.json, or by declaring them with CSS @font-face. Serving fonts from your own site can remove a connection to a third-party font host, but it does not automatically make pages faster: file size, font discovery, server or CDN delivery, caching, and rendering behavior all affect the result.
Choose a local font or a system stack
A system font stack avoids downloading a web font altogether. A custom font may better meet your design or branding needs, but it adds font data the browser must discover and retrieve. If you need a custom font, self-hosting is one delivery option—not a universal speed winner over a third-party host.
Compare the options on the actual site: how much font data is needed, whether the glyphs cover your content, how early the browser discovers the font, how the text appears while it loads, and how well your server or CDN delivers and caches it. A third-party font can require an additional connection; a locally hosted font still depends on your own delivery setup.
Prepare the font files
- Confirm the license. Check that the font license permits web embedding and self-hosting. If you plan to subset or otherwise modify the font, confirm that modification is allowed too.
- Use WOFF2 for modern browser support. web.dev describes WOFF2 as widely supported and the best-compressing format among those it discusses. It reports that WOFF2 compresses 30% better than WOFF; that is a format comparison, not a guaranteed reduction for every file or a 30% improvement in page speed. The returned page metadata does not state the publication year for this comparison. Read web.dev’s web-font loading guidance.
- Include only the faces you use. A family may have separate files for weights and styles. Register the weights and styles the site actually needs rather than downloading or requesting every available face.
- Preserve required glyphs. Subsetting and CSS
unicode-rangecan avoid shipping unused characters, but the subset must still cover the languages and characters in your content. Check how the font is used before removing glyphs.
Register fonts in a compatible block theme
WordPress’s Theme Handbook documents registering bundled fonts through theme.json. This route is for themes that use the documented configuration mechanism; check the installed theme and WordPress version before changing theme files. The Handbook’s example assumes a downloaded and converted WOFF2 file.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- Place the licensed font file in the theme. Keep the file in the theme’s assets and note its path so the configuration can refer to it.
- Add a font family and face in
theme.json. Give the family a semantic slug and define its face metadata. The documented fields includefontFamily,fontWeight,fontStyle,fontStretch, andsrc; the face values correspond to CSS@font-facedescriptors. Follow the structure supported by the installed theme and current Handbook documentation: WordPress Theme Handbook: Typography. - Make the family available to the site’s typography settings. Registering a face does not by itself mean the page uses it. Map or select the family in the theme’s typography configuration or styles, then check the rendered page.
Use a child theme or another maintainable theme-specific approach if editing the active theme would cause your changes to be overwritten during an update.
Register a font with CSS when theme configuration is not the route
For a site whose theme does not handle the font through theme.json, a developer can declare the file with CSS. The URL must point to the font file as served by the site, and the descriptors must match the actual face.
@font-face {
font-family: "Site Sans";
src: url("/wp-content/themes/your-theme/assets/fonts/site-sans-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
body {
font-family: "Site Sans", sans-serif;
}Replace the example path, family, style, and weight with the real values. Add separate @font-face declarations for other files you use, such as a bold or italic face, and set the corresponding weight or style accurately. Add the CSS through the theme’s supported stylesheet or customization mechanism. Verify that the page’s styles actually select the declared family.
Choose how text behaves while the font loads
The font-display descriptor controls the tradeoff between showing text promptly and waiting for the custom face. web.dev describes these common choices in its web-font loading guidance:
Rank #3
swap: Show fallback text promptly, then use the web font if it arrives. The change in font metrics can move content and contribute to layout shift.optional: Favor early text and avoid a late swap; if the font arrives too late, the browser may not use it for that page view.block: Prioritize the web font, which can delay visible text while the browser waits.
Choose based on the page’s needs and test the result. A font that is important to the design may call for a different tradeoff from one that is merely decorative.
Make the font discoverable without overusing preload
The browser needs to discover the font through stylesheets and then fetch the file. Keep the stylesheet path efficient and make sure the relevant face is associated with the family and styles in use. Do not preload every font file: an unnecessary preload can compete with more important page resources. Preload only a genuinely critical face, and use the appropriate crossorigin handling for a font preload. For current loading considerations, see web.dev’s guidance.
Rank #4
Check delivery and measure the result
Self-hosting changes where the browser gets a font; it does not ensure that the file arrives quickly. web.dev recommends considering CDN delivery, HTTP/2 or HTTP/3, and caching headers when self-hosting fonts. These are factors to inspect in your own setup, not a promise that changing any one of them will improve a particular site. See web.dev’s font best practices.
- Inspect font requests. In your browser’s developer tools, open the Network panel, reload the page, and filter for font requests. Check which faces are requested, their transfer sizes, and their timings.
- Check how the page renders. Confirm the expected font appears and assess whether fallback text, a later swap, or delayed text causes a visible problem or layout movement.
- Compare before and after. Test the same pages under comparable conditions before and after the change. Compare font requests and page behavior; do not assume that moving files locally produced a speed gain.
- Investigate delivery if the local font is slow. Review server or CDN response, protocol support, and cache behavior. A slow local response can erase the benefit of avoiding a third-party connection.
There is no measured speed result for your site until you test it. The web.dev recommendations are general guidance, not a WordPress-specific benchmark.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Best Value
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.
