Twenty Twenty-Five Fonts Not Loading: theme.json, Variations and the Font Library

The typeface you chose versus the one visitors get

Font trouble on this theme rarely looks like an error. The site works. Headings that should wear Literata come out in a plain system serif, or the light, airy Manrope body text arrives in Helvetica. Sometimes the editor looks perfect and only the live site is wrong, which is the most useful clue of all.

• Every page in a system font: the font face rules are missing from the page, or the files they point at return errors.
• Right in the editor, wrong on the site: the editor and the front end are loading different font lists.
• One block in the wrong font: that block names a family the active settings do not include.
• Wrong only after a move to a new domain: stored font addresses still point at the old one.
• Wrong only for visitors: a cache or optimizer is serving older or trimmed CSS.

Classic-theme font failures (Google Fonts switches, CDN headers, icon sets) are handled in our cross-theme fonts guide. Little of that applies here, because this theme takes a different route.

Where Twenty Twenty-Five keeps its type

Fonts are declared in theme.json, not enqueued as stylesheets. The default style declares two families, each a single variable .woff2 file in the theme's assets/fonts folder: Manrope (weights 200 to 800) for headings and body, and Fira Code for code. WordPress reads those declarations and prints the @font-face rules itself, inline in the page head, inside a style tag with the class wp-fonts-local. No stylesheet file, no Google request.

The style variations bring their own pairs. Noon pairs Beiruti headings with Literata body text. Dusk sets Vollkorn over Fira Code, Afternoon sets Platypi over Ysabeau Office, Twilight puts Roboto Slab over Manrope, Morning uses Literata over Ysabeau Office, Sunrise Platypi over Literata, and Midnight Literata over Fira Sans. Evening changes colors only. The same seven pairs are also offered on their own as typography presets, named for the pair, so a site can keep Default colors with Beiruti and Literata type.

The Font Library arrived in WordPress 6.5, inside Styles, Typography. WordPress 7.0 gave it its own screen, Appearance, Fonts, for every theme. Installing a font saves it to the site; activating it adds it to the active theme's global styles; assigning it, in Styles, Typography under Text or Headings, is what actually changes the page. Three separate steps, and skipping the last two is the most common mistake.

Suspects, ranked for a Twenty Twenty-Five site

1. Installed, but never activated or assigned

The font appears in the Library, so the owner assumes it is live. Check: open the Font Library and confirm the family shows as active, with the weights you need ticked. Then open Styles, Typography, Text and Headings and confirm the family is selected for each.

2. A theme font switched off

The Font Library lists the theme's own families too, and lets you deactivate them to trim downloads. Deactivate Manrope while the Default style still uses it and the browser falls back to a system font. Check: in the Library's theme section, Manrope and Fira Code should be active unless you replaced them everywhere.

3. A block remembering a font from another look

Since WordPress 6.7, the editor loads the font files of every style variation so it can preview them, while the live site loads only the families in your active settings. A block or copied pattern that carries an explicit family from another variation can look right in the editor and wrong on the site. Check: select the odd block and look at Typography in its Styles tab; reset any font family that is not part of your current pair.

4. Files or addresses lost in a migration

Font Library files live in wp-content/uploads/fonts, and their full web addresses are saved as JSON in the database. JSON often stores slashes escaped, as https:\/\/, so a search and replace that only looks for https:// can miss them. Check: in the browser's Network tab, filter by Font. A 404 or a request to the old domain settles it.

5. An optimizer trimming inline CSS

Because the @font-face rules are inline, tools that remove unused CSS, move inline styles or rewrite the head can drop them. Check: view the page source logged out and search for wp-fonts-local. If the block is missing or empty while the editor works, the optimizer is the suspect.

6. A new theme, or a child theme

Activation is stored per theme, so switching themes, including to a child theme, leaves Library fonts installed but inactive. Check: did the active theme change since the fonts last worked?

Getting the right type back on screen

1. 1

   Look at the page source first

   Open the live page in a private window, view the source and find the style tag with the class wp-fonts-local. Note which families it declares and whether their src addresses use your current domain.

2. 2

   Read the Network tab

   Reload with the Font filter on. Every font file should return 200 from your own domain. Write down any 404s or old addresses.

3. 3

   Confirm activation and assignment

   In the Font Library, activate the families and weights you use. In Styles, Typography, set Text and Headings explicitly, then save.

4. 4

   Pick one look on purpose

   If a style variation or typography preset was tried and abandoned, choose the one you want again from Browse styles or the Typography presets so the saved settings match it.

5. 5

   Repair moved fonts

   If files are missing, copy wp-content/uploads/fonts from the old server. If addresses are wrong, run the search and replace again for both https://old-domain and its escaped form, on a staging copy first.

6. 6

   Exempt the font rules from optimization

   Exclude the wp-fonts-local inline style from any unused-CSS or inline-CSS feature, then purge the plugin, host and CDN caches.

7. 7

   Recheck on a phone

   Test logged out on a slow mobile connection. Text shows in a fallback font briefly by design, because WordPress uses font-display fallback unless told otherwise.

If fonts load but text jumps when they arrive, that is layout shift rather than loading; see layout shift on WordPress themes. The Twenty Twenty-Five speed guide explains why adding families costs downloads even when they load correctly.

One family per job, written down

Most repeat font failures on this theme come from abundance. Nine looks, seven presets and a Library with a whole Google collection invite experiments, and each experiment can leave an activated family, a block-level override or a stray setting behind. Settle on one heading family and one body family, deactivate the rest, and record the choice.

• Write down the variation or preset in use and the two families it relies on.
• Assign fonts in Styles, Typography, not block by block, so a future switch changes everything at once.
• Treat wp-content/uploads/fonts as part of the site: back it up and move it with every migration.
• Reactivate Library fonts after any theme switch, child themes included.
• Keep the optimizer away from WordPress's inline font rules.

Where custom CSS sets fonts too, it can win over everything above; Twenty Twenty-Five CSS not updating explains the order. And if fonts went missing together with the header, check Twenty Twenty-Five header not showing for a theme switch behind both; the same switch can reset the phone menu. Our hosting and maintenance plans back up the fonts folder with everything else.

A font that lives in your theme folder cannot be blocked by Google. It can still be forgotten by your own database.

Three switches between a font and the page

Credit where due: Twenty Twenty-Five handles type better than most commercial themes. Local files, variable fonts, no third-party requests, a font manager built into core. The fragility is in the layers: installed, activated and assigned are three switches, stored per theme, editable by anyone with access to Styles, and subject to whatever an optimizer does to the head of the page.

On a Next.js site, next/font fetches the font files during the build, hosts them on the same domain as the pages and writes a size-matched fallback, so nobody can switch the font off on the live server by accident. It costs more to build and needs a developer to change the type. Weigh it in Twenty Twenty-Five vs Next.js and plan with moving Twenty Twenty-Five to Next.js. The Twenty Twenty-Five review covers the theme as a whole, the troubleshooting hub every other fix, and our theme troubleshooting service will trace a stubborn font for you. When fonts are one symptom among several, the theme repair team takes the whole site.