Ollie Fonts Not Loading: theme.json, Mona Sans and the Font Library

Blank, borrowed or swapped: which font failure you have

Font trouble on an Ollie site comes in three shapes, and each shape points somewhere different. Test logged out, in a private window, on a phone as well as a laptop, and note which one you see.

• Text is invisible for a moment, then appears in the right font. The font loads; the theme tells the browser to hide text while it waits.
• Text appears in a system font and stays that way. Either the file failed, or the style asks for a family the site no longer defines.
• Headings changed typeface after a redesign, while body text still looks right. A preset or style variation switch is the prime suspect.
• A font from the Font Library works in the editor but not live, or broke after moving the site. That is a file path problem.

The general guide to theme fonts not loading covers Google Fonts blocking, icon fonts and CORS across every theme. This page sticks to the parts only an Ollie site has.

One variable file doing the work of four families

Ollie 1.6.3's theme.json declares four families, Mona Sans, Mona Sans Expanded, Mona Sans Condensed and Mona Sans Narrow, and all four point at the same file: assets/fonts/mona-sans/Mona-Sans.woff2. They differ only in font-stretch. Body text uses weight 430, headings 600, both cut from that one variable file. WordPress turns these declarations into @font-face rules and prints them inline in the page head, in a style element with the class wp-fonts-local.

Every face carries fontDisplay set to block. So do the ten typography presets in the styles/typography folder, which swap in the other bundled typefaces. That single file has a useful consequence for diagnosis. If body text and headings both fall back at once, suspect the file or its @font-face rule. If only headings changed, suspect the family definition.

What stops Ollie's type, ranked for this theme

1. The font is loading, just behind a curtain

Block tells the browser to keep text invisible until the font file lands. On office Wi-Fi with a warm cache that takes no time. On a phone with a weak signal, the hero headline is simply absent for a while, and an owner reasonably reports that fonts are broken. Check: in Chrome's developer tools, throttle the network to a slow mobile profile and reload. Text that appears late in the correct font is a display problem, not a loading one. The Ollie speed guide covers what it does to Largest Contentful Paint.

2. A preset switch orphaned a font choice

Each preset and style variation redefines the site's font families. A heading you set to Fraunces under Preset 6 keeps asking for Fraunces after you move to Preset 1, which does not define it. The browser cannot resolve a font variable that has no value, so the text inherits from its parent or drops to the browser default. Check: inspect the text. A class such as has-fraunces-font-family with no matching rule, or an empty font variable in the computed styles, confirms it.

3. A Font Library file went missing

Fonts added through the Font Library, available since WordPress 6.5, are stored by default in wp-content/uploads/fonts, a location the font_dir filter can change. A migration that copied the theme but skipped that folder, or a move from staging that kept the old domain in the stored font addresses, leaves the @font-face rule aiming at nothing. Check: filter the Network tab by Font and reload. A 404, or a font address on the old domain, names the problem.

4. The styles were saved under another theme

WordPress saves Global Styles, including typography choices and the fonts you activated, against the theme that was active at the time. Switch from Ollie to an Ollie child theme, or back, and those choices stay behind. Check: open Styles in the Site Editor. If typography shows Ollie's defaults rather than your settings, you are looking at a different theme's record.

5. An optimizer or CDN got between the page and the file

Ollie's fonts arrive through an inline style block, so a plugin that strips or delays inline CSS can remove them. Serving theme files from a CDN hostname without the right CORS header makes browsers refuse the font. Check: view source and search for wp-fonts-local; then read the console for a blocked-by-CORS message.

Putting Ollie's typography back

1. 1

   Reproduce it logged out

   Private window, cache warm, real phone if the complaint came from one. Note which text fails: everything, or headings only.

2. 2

   Read the Network tab

   Filter by Font. You should see Mona-Sans.woff2 or your preset's file with status 200 from your own domain. Note every 404, redirect or foreign domain.

3. 3

   Confirm the @font-face rules exist

   View source and find the wp-fonts-local style block. If it is missing, turn off your optimizer's CSS features and reload.

4. 4

   Reapply typography in Styles

   In the Site Editor, open Styles, then Typography. Reselect the preset you want, then reset any individual block whose font was set by hand under an older preset.

5. 5

   Repair Font Library files

   Reinstall a missing family from the Font Library, or restore the uploads/fonts folder from backup. After a domain move, update any stored font addresses that still name the old site.

6. 6

   Decide on block or swap

   If the complaint is a blank headline on slow phones, change fontDisplay to swap for the families you use, through the wp_theme_json_data_theme filter in a small site plugin. Keep the edit outside Ollie's own files so updates do not erase it.

7. 7

   Purge caches and retest

   Clear the page cache, the host cache and any CDN, then check three page types on a throttled phone profile.

Swap has a cost. When the real font replaces the fallback, lines can rewrap and nudge the page; layout shift on WordPress themes shows how a closely matched fallback stack keeps that small. If CSS edits of any kind refuse to show, see CSS changes not showing.

A typography routine that survives redesigns

• Choose fonts in Styles, not block by block. A font set on one heading is the one that gets orphaned at the next preset change.
• Before switching presets or style variations, list the blocks where you overrode the font, so you can recheck them after.
• Decide on a child theme before you customize anything in the Site Editor, not after.
• Add wp-content/uploads/fonts to your backup and migration checklist alongside the rest of uploads.
• Keep the family count low. Every Ollie preset uses one or two font files; adding Font Library families on top adds downloads, not just choices.

The rest of Ollie's quirks live on its sibling pages: mobile menus and broken layouts. The Ollie review covers the theme as a whole, and Twenty Twenty-Five's font guide shows the same theme.json mechanism on WordPress's default theme. Every other theme's problems are filed in the troubleshooting section.

Fonts decided in an admin screen, or in code

Ollie handles fonts better than most WordPress themes: local files, no Google request, one variable file for the default look. What it cannot control is the admin screen. Anyone with Site Editor access can switch presets, install a family from the Font Library or set a heading's font by hand, and nothing checks the result on a slow phone before visitors see it.

In a Next.js build, next/font downloads the files at build time, serves them from the site's own domain and generates a fallback matched to the real font's proportions, and typography changes are reviewed before deploy. It costs more up front and needs a developer for design changes. Ollie vs Next.js weighs the trade, and moving from Ollie to Next.js explains the move. To stay on Ollie with the fonts tuned properly, our theme speed optimization service handles display settings, preloads and fallbacks as one job.