Astra Fonts Not Loading: Why Your Typeface Fell Back to Arial

A system font standing in for your brand

Font failures look smaller than they are. The site works, the words are there, and only the shape is wrong. Visitors notice anyway, the way they notice a shop sign in a font the shop did not choose. On Astra the failure takes a handful of distinct forms, and the form tells you where to look.

• The whole site uses a system font. Astra's font stylesheet never loaded, or loaded and then failed to fetch the font files.
• Headings right, body wrong, or the reverse. The two are set separately in Astra's typography settings, or one is overridden by a builder.
• Bold text looks smeared. The weight you asked for was never loaded, so the browser fakes it from the regular weight.
• The right font arrives a moment late. Text appears in a fallback, then swaps. That is font-display swap doing its job, not a failure.
• Fine in the Customizer, wrong on the live site. The preview always loads Google's copy; the live site may be using your local one.

That last point is from Astra's own code: in the Customizer preview and in the admin, the theme requests fonts from Google even when local loading is on. A preview that looks right proves only that Google has the font.

Two roads for a Google Font in Astra

You choose fonts under Global > Typography in the Customizer. Base Typography holds the Body Font and Headings Font, each with a family and weight, and Presets offers ready-made pairings. Individual headings and elements can take their own families too. Astra gathers every Google font in use and requests them in one stylesheet called astra-google-fonts, with font-display set to swap by default.

Road one is remote. The stylesheet comes from fonts.googleapis.com and the font files from fonts.gstatic.com; since 4.12.6 Astra adds preconnect hints for both. Road two is local. Turning on Load Google Fonts Locally under Astra > Settings > Performance makes the free theme download the font files once and serve them from your own server, and Preload Local Fonts becomes available only after local loading is switched on. You do not need Astra Pro for either road; the free theme's code reads both settings.

Most likely culprits on an Astra site, and how to catch each

Open the page in a private window, press F12, go to the Network tab, filter by Font and reload. You will see one of three things: font files loading with status 200, requests failing with 404 or a blocked status, or no font requests at all. That single view sorts the causes below.

Builders cause more of these than the theme does. Elementor and Spectra both let you set a family on a widget or block, and a widget setting beats the theme's global one. Elementor also loads its own Google Fonts for the fonts chosen inside it, through its own settings, which means a site can have Astra serving fonts locally while Elementor still calls Google. Our Astra with Elementor and Astra with Gutenberg guides explain how each divides the work.

Font bugs fixed in Astra's 4.13 releases

Local font loading had a busy year. If you run an older 4.13 release, compare your symptom with this list from the changelog shipped with Astra 4.14.0 before touching anything else.

• 4.13.4: a PHP fatal in the webfont and docs filesystem helpers on FTP-based hosts without WordPress credentials.
• 4.13.6: body font size rendering as 0px or 0% on PHP 8.0 and later when the stored desktop value was integer 0. Invisible text, not a missing font.
• 4.13.7: Load Google Fonts Locally failing with a CORS block on single installs serving several domains, such as WPML with a domain per language.
• 4.13.11: local webfonts returning 404 on Bedrock and other subfolder installs.
• 4.13.12: the Customizer typography dropdown collapsing and hiding Line Height and Letter Spacing when an imported template left the line-height unit unset.

Updating on a staging copy and retesting the Network tab is the quickest way to rule these in or out. If an update itself broke things, see Astra layout broken after update.

Getting Astra's fonts back, in order

1. 1

   Find who sets the font

   Inspect the affected text and read the font-family in the Computed panel. If the rule comes from an Elementor or Spectra file, fix it in the builder, not in Astra.

2. 2

   Set families and weights in Global > Typography

   Choose the Body Font and Headings Font with every weight you actually use. Fewer weights load faster; missing ones get faked.

3. 3

   Check the Network tab

   Logged out, filter by Font, and note 404s, blocked requests or missing requests.

4. 4

   Flush the local fonts

   With Load Google Fonts Locally on, use Astra's Flush Local Fonts Cache option in the Performance settings so the files rebuild, then load a page once to trigger the download.

5. 5

   Confirm the folder

   Check that wp-content/astra-local-fonts exists and holds a folder per family. If it stays empty, ask your host about write permissions and the filesystem method.

6. 6

   Purge every cache

   Clear the page cache plugin, host cache and CDN so no page still points at an old font stylesheet.

7. 7

   Preload only what is above the fold

   Turn on Preload Local Fonts, then confirm the preloaded file is the one the hero text uses. Preloading every weight slows the page.

Keeping fonts stable through the next redesign

Font problems come back when typography is set in three places by three people. Pick one owner: Astra's Global > Typography for site-wide families, the builder only for exceptions, written down. Keep the number of families to two and weights to what the design uses. After any Customizer change on a local-fonts site, view one page logged out so the folder rebuilds before a cache freezes a broken version.

If you also see stale colors or spacing, the same cache layers are involved, and Astra CSS not updating walks through them. The general WordPress theme fonts not loading page covers the same failure on other themes, and layout shift in WordPress themes explains why a late font swap can move the page.

Fonts that load themselves, versus fonts you babysit

Look at the moving parts behind one typeface on an Astra site: a theme setting, a performance toggle, a download routine, a folder that is deleted and rebuilt, a preload option, a builder that may load its own copy, and three caches. None of it is unreasonable. All of it is maintenance. The Astra speed guide shows how fonts fit the wider performance picture, and our Astra review covers the theme as a whole.

Next.js handles fonts with next/font, which downloads the font at build time, self-hosts it and sets fallback metrics to limit layout shift. There is no runtime folder to rebuild. It costs more to build and structural changes need a developer, so it suits sites where speed and polish earn money. Compare them in Astra vs Next.js, read about moving off Astra, or let our theme troubleshooting service fix the fonts you have. The Astra repair hub and the troubleshooting section list related problems.