Flatsome Fonts Not Loading: The Local Folder, the Google Switch and the Icon Font

Arial in the headings, squares where the cart icon was

Font failures on Flatsome come in two kinds, because the theme uses two kinds of font. Your text fonts, chosen in Typography, carry the brand. Flatsome's own icon font, fl-icons, draws the hamburger, search, cart and account icons. They load from different folders and fail for different reasons.

• Headings or body text in a plain system font. The text font file never arrived, or was never requested.
• The right font on your computer, the wrong one on everyone else's. The font is installed on your machine, and the site is not actually serving it.
• Bold text that looks smeared or stretched. The bold weight is missing, and the browser is faking it from the regular one.
• Empty squares or blank gaps where icons were. The fl-icons file is blocked or missing.
• A custom font on desktop headings but not in the phone menu. The custom CSS missed the selectors Flatsome uses for its sidebar.

Open the browser's developer tools, choose the Network tab, filter by Font and reload. Each font file shows a status. A 404 means missing, a blocked or CORS error means another domain is refusing, and no request at all means nothing asked for it. That one reading tells you which section below to jump to. The cross-theme version is WordPress theme fonts not loading.

How Flatsome Classic serves type after 3.16

UX-Themes' Google Fonts article spells out the arrangement: fonts selected in the Typography panel are downloaded to /wp-content/fonts/ and served from that directory, and the theme needs permission to create that folder. On the vendor's demo store the files sit in subfolders by family, such as /wp-content/fonts/lato/, as WOFF2 files. The @font-face rules are printed inline in the page head, in a block labeled kirki-inline-styles, and the rules that apply each font to body text, navigation and headings sit in Flatsome's custom-css block.

The docs also mention an option to fall back to the old method of loading from Google's servers, described as temporary. Leave it off unless a plugin of yours genuinely needs it; with it on, privacy plugins and optimizers that strip Google Fonts requests can quietly remove your typography.

What breaks Flatsome fonts, checked in this order

1. The fonts folder cannot be written, or never made the move

If /wp-content/ is locked down, Flatsome cannot create /wp-content/fonts/ or save files into it, and the page asks for fonts that do not exist. Migrations cause the same result from the other direction: a tool that copies themes, plugins and uploads but not other folders leaves the fonts behind. Check: look for /wp-content/fonts/ in your host's file manager and open one font address from the Network tab directly.

2. Google Fonts were switched off on purpose

The custom fonts article says Flatsome loads Google Fonts by default and that you can disable that in Theme Options > Style > Typography. Owners flip that switch for privacy, or because a consultant said to, and the CSS still names Lato or Montserrat. Computers that have the font installed show it; everyone else gets a fallback. Check: read the switch, then test on a phone, which rarely has your brand font installed.

3. The font addresses still point at the old site

After a domain change or a move to HTTPS, stored rules can keep the old address. An http font on an https page is blocked as mixed content. A font on another domain is blocked unless that domain sends a header allowing it, because browsers apply cross-origin rules to fonts. Check: compare the font addresses in the Network tab with the address in your browser bar. Our mixed content fix covers the http case.

4. A CDN or optimizer moved the files

On the demo, the fl-icons font is referenced with a full address including the domain. Point theme files at a CDN hostname without the right headers and those icons turn to squares. Optimizers with their own font features, such as self-hosting or removing Google Fonts, can double-handle what Flatsome already does. Check: turn off the optimizer's font and CDN rewriting, purge and reload.

5. Custom font CSS missed Flatsome's selectors

UX-Themes' custom fonts article gives the selectors to use, and they include the phone sidebar's menu links and a centered off-canvas menu as well as body, navigation, headings and the alt-font class. Copy only a body and h1 rule from a generic tutorial and the phone menu keeps the old typeface.

Putting your typefaces back on every page

1. 1

   Read the Network tab

   Logged out, in a private window, filter by Font and reload a page. Note every failed file and its status.

2. 2

   Check the folder

   Confirm /wp-content/fonts/ exists and holds a subfolder for each family you chose. If not, ask your host to make /wp-content/ writable by WordPress, which the vendor's docs require.

3. 3

   Make Flatsome fetch the files again

   In Theme Options > Style > Typography, confirm the Google Fonts switch is on, then re-select and republish your fonts. If the folder stays empty after that, permissions or the host are blocking the download, and your host or UX-Themes support needs to see it.

4. 4

   Fix old addresses

   If fonts point at an old domain or http, run a careful database search-and-replace with a tool that handles serialized data, on a backup first.

5. 5

   Settle the CDN

   Serve fonts from your own domain, or make the CDN send a cross-origin header that allows your site. Then purge it.

6. 6

   Switch off duplicate font handling

   Disable any optimizer feature that self-hosts, preloads or removes Google Fonts, and let Flatsome do that job alone.

7. 7

   Complete custom font CSS

   If you use uploaded fonts, add every selector from the vendor's custom fonts article, then turn Google Fonts off so two systems do not compete.

8. 8

   Retest on a phone

   Check headings, body text, the phone sidebar menu and the header icons on a real device.

Font changes can also look stuck when they are cached. If the Network tab shows the new font loading and the page still shows the old one, the cache chain is the culprit, and Flatsome CSS not updating walks through it.

Choosing fonts Flatsome can keep serving

• Two families at most. One for headings, one for text. The alt font is optional; skip it unless the design needs a script accent.
• Only the weights you use. Every extra weight is another file to download, store and lose in a migration.
• Copy /wp-content/fonts/ in every migration and backup. Add it to your host's backup scope if it is not there already.
• Keep fonts on your own domain. It avoids cross-origin rules entirely and is usually the faster arrangement anyway.
• Recheck after Flatsome updates. Font handling changed in 3.16.0; a future release may change it again.

Fonts are also a speed decision. Our Flatsome speed guide covers trimming families and weights, and WordPress theme layout shift explains why a late font can move text. If the icons that vanished include the hamburger, Flatsome mobile menu not working checks whether the menu still opens.

Type that ships with the site instead of chasing it

On Flatsome, a font reaches a visitor through a Customizer setting, a download job, a folder permission, a stored address, an inline style block, an optimizer and possibly a CDN. Each link works until a migration, a privacy plugin or a hosting change breaks it. That is the WordPress theme stack at its most mundane.

In a Next.js build, next/font downloads fonts at build time and serves them from the site's own domain, with sizing rules that reduce layout shift. Nothing is fetched on the live server, so there is no folder to lose. It costs more up front and needs a developer to change a typeface. Flatsome vs Next.js weighs that fairly, and Flatsome to Next.js covers the move. Sites we build run on Athena CMS, with every version kept.

For a Flatsome store that should stay put, our theme troubleshooting service traces the failing file and fixes the folder, CDN or CSS behind it. The Flatsome repair hub has our other Flatsome fixes, including update and registration problems if you are stuck on a version older than 3.16.