Site Designer Guide
fonts google-fonts export font-face resources debugging

My fonts aren't loading on export

Fonts look correct in Site Designer’s canvas and Live Preview, but after you export and open the HTML files, the text falls back to a system font. Here are the most common causes and fixes.

Cause 1: Google Fonts require an internet connection

Google Fonts are loaded via a <link> tag pointing to Google’s servers. They work in Site Designer’s canvas (which has internet access) and in Live Preview (which uses a local server with internet access). But if you open the exported index.html file directly in a browser as a file:// URL, one of two things can happen:

  • If you’re online, the Google Fonts <link> loads normally and fonts appear correctly.
  • If you’re offline, or if Google’s servers are briefly unreachable, the font fails to load and the browser falls back to the system font.

Fix: Always test exported HTML through a local web server (e.g., Live Preview, npx serve ., or XAMPP), not by double-clicking index.html. The file:// protocol is not representative of how your site runs on a real host.

Also verify that your published site’s visitors have an internet connection — if they are offline, Google Fonts won’t load for them either. For guaranteed font delivery, use self-hosted fonts (see Cause 2).

Cause 2: Custom fonts not included in the export

If you uploaded a custom font file (WOFF2, WOFF, TTF) to your project, it must appear in the Resources panel to be included in the export. Fonts that are only referenced in hand-written CSS but not added through the Resources panel are not copied to the export folder.

How to check:

  1. Open the Resources panel in Site Designer.
  2. Look for your font file under the Fonts section.
  3. If it’s missing, drag and drop the font file into the Resources panel.

After adding the font, re-export and verify that the font file appears in the /fonts/ folder of the export.

Cause 3: @font-face path is wrong after moving the export folder

The exported style.css contains @font-face declarations with relative paths like ../fonts/MyFont.woff2. These paths are relative to the CSS file’s location. If you move the export folder or reorganize its subfolders, these paths break.

How to check: Open the exported style.css and look for @font-face rules. Check that the src: url() path matches the actual location of the font files.

Fix: Either restore the original folder structure, or update the paths in the CSS. Better yet, re-export from Site Designer — it will regenerate correct paths based on the current export directory.

Cause 4: Font not referenced in CSS

If a font exists in the export folder but isn’t referenced in the stylesheet, the browser won’t load it. This can happen if you changed a font in the Resources panel but didn’t apply it to any element in the Style pane.

How to check: In Site Designer, select an element that should use the custom font. Open the Style pane → Typography and verify that the font family shows the correct font name (not a system font).

Fix: Apply the font to elements via the Style pane. Site Designer will generate the correct @font-face and font-family references in the exported CSS.

Quick diagnostic checklist

  • Test via Live Preview or a local server, never file://.
  • Check the Resources panel — is the font listed?
  • Check the export folder — does a /fonts/ directory exist with the font files?
  • Check the exported style.css — do @font-face paths match the actual file locations?
  • Check the element’s computed style in the browser’s DevTools — is font-family showing the right font or falling back?