--- title: "Fonts: Custom Fonts, Missing Fonts and Preview Mismatches | ThemeSpot Docs" description: How fonts work in a ThemeSpot theme, how to use a custom font, why a font can go missing or look different from the preview, and the HubSpot defect that drops brand-kit fonts after a deploy. --- [Skip to content](https://themespot.app/docs/fonts#main-content) [![themespot](https://themespot.app/hubfs/themespot-1.svg)](https://themespot.app/?hsLang=en) - Product - [Build themes/theme-development](https://themespot.app/theme-development?hsLang=en) - [Manage content/content-management](https://themespot.app/content-management?hsLang=en) - [Roadmap/roadmap](https://themespot.app/roadmap?hsLang=en) - [Pricing](https://themespot.app/pricing?hsLang=en) [Connect your portal](https://themespot.app/join-the-waitlist?hsLang=en) Docs menu - [Getting started](https://themespot.app/docs?hsLang=en) - [Connect your portal](https://themespot.app/docs/connect-your-portal?hsLang=en) - [Permissions and shared data](https://themespot.app/docs/permissions?hsLang=en) - [Approvals and autonomy](https://themespot.app/docs/approvals?hsLang=en) - [Working with themes](https://themespot.app/docs/themes?hsLang=en) - [Site health scans](https://themespot.app/docs/site-health?hsLang=en) - [Support](https://themespot.app/docs/support?hsLang=en) Documentation - [Getting started](https://themespot.app/docs?hsLang=en) - [Connect your portal](https://themespot.app/docs/connect-your-portal?hsLang=en) - [Permissions and shared data](https://themespot.app/docs/permissions?hsLang=en) - [Approvals and autonomy](https://themespot.app/docs/approvals?hsLang=en) - [Working with themes](https://themespot.app/docs/themes?hsLang=en) - [Site health scans](https://themespot.app/docs/site-health?hsLang=en) - [Support](https://themespot.app/docs/support?hsLang=en) Working with themes # Fonts Last updated 7 October 2026 How fonts reach your site, how to use a custom font, and what to do when a font is missing or the live page doesn't match the preview. ## How fonts work in a ThemeSpot theme A theme never ships font files. Every typeface is a **font field** in Theme settings, and HubSpot loads it for you. A font comes from one of three places: - **Google Fonts.** Pick the family from the list in the font field. HubSpot loads it on every page. No upload, no licence to manage. - **Your brand kit.** A licensed or bespoke family you upload to HubSpot once. It then appears in every font field like any other choice, and HubSpot writes the `@font-face` for it. - **System fonts.** Families the visitor's device already has (Arial, Georgia, system-ui). Nothing is loaded. When ThemeSpot builds a theme from a design, it names the families the design uses and sets the field's source to match: Google for a Google family, brand kit for anything licensed. ## How do I use a custom font? 1. Get the web font files from the foundry (`.woff2` or `.woff`, one per weight you use). Check the licence allows web embedding. 2. In HubSpot go to **Settings → Account defaults → Branding**, open your brand kit, and under **Fonts** upload the files. Name the family exactly as the theme expects; ask the agent if you're not sure what that is. 3. Open **Theme settings** (any page in the editor → **Design → Edit theme settings**, or **Content → Design Manager**), open **Fonts**, choose the family from the brand-kit section of the list, and **Publish**. 4. Reload a live page. If the font is still not there, work through the checklist below. ## My font is missing, or the live page doesn't look like the preview The ThemeSpot preview renders the theme with the font names the design asked for. On your machine, your browser substitutes the nearest installed family when the real one isn't available, so the preview can look right while the live page falls back. The live page only has what HubSpot can load: a Google family, or a brand-kit family that is actually uploaded. The usual causes, in order of how often we see them: 1. **The family isn't in the brand kit.** The design named a licensed font nobody uploaded. Headings render in the fallback stack. 2. **Wrong weights.** The brand kit holds only the regular weight, so bold or light text is synthesised by the browser and looks heavier or thinner than the comp. 3. **Name mismatch.** The brand-kit upload is called *Doomsday Regular* while the theme asks for *LayarBahtera Doomsday*. HubSpot treats them as different families. 4. **Settings not published.** The font was chosen in Theme settings but the settings were saved, not published. 5. **The deploy defect.** Everything was right until a theme deploy, and now it isn't. See the next section. ## Troubleshooting checklist 1. **Ask the agent.** In chat: *"Which font does my heading use, and where does it come from?"* The agent reads the theme's font fields and the live page and tells you whether the family is Google, brand kit or system, whether the live page is loading it, and gives you the direct link to your portal's brand kit and Theme settings. 2. **Check the brand kit.** **Settings → Account defaults → Branding → your brand kit → Fonts**. The family must be there, spelled as the theme expects, with the weights the design uses. 3. **Check Theme settings.** Open **Fonts**, confirm the right family is selected, and make sure it was **published**, not just saved. 4. **If it broke right after a deploy**, apply the fix below. 5. **Still wrong?** Ask the agent to compare the live page with the preview and say exactly which element is in the wrong family. If it's a theme fault, it files the fix for you. Otherwise email [hello@themespot.app](mailto:hello@themespot.app). ## Brand-kit font missing after a theme deploy (HubSpot defect) This affects React themes on HubSpot, including HubSpot's own Elevate theme and every ThemeSpot theme. When a theme is re-deployed, HubSpot sometimes rebuilds the theme's brand stylesheet from the theme's defaults instead of your published Theme settings. A Google family survives that because the name resolves on its own. A brand-kit family has no file at the default, so the browser falls back to a system font, even though Theme settings still show your font and the file is still in the brand kit. **The fix** (about two minutes): 1. Open **Theme settings → Fonts**. 2. Change the affected font to **any other family** and **Publish**. 3. Change it **back to your brand-kit family** and **Publish** again. 4. Hard-refresh the live page. Re-selecting the same font without the detour usually does nothing, because HubSpot sees no change to save. If one round-trip doesn't take, do it once more; occasionally it needs two attempts. It can recur on a later deploy; the fix is the same each time. We've reported the behaviour to HubSpot. ThemeSpot can't do this step for you: Theme settings live in HubSpot's editor, which the agent can't drive. Before a deploy of a theme that uses a brand-kit font, the deploy summary reminds you this may happen, and after you republish, the agent will re-check the live page and confirm the family is back. On this page 1. [How fonts work in a ThemeSpot theme](https://themespot.app/docs/fonts#how-fonts-work-in-a-themespot-theme) 2. [How do I use a custom font?](https://themespot.app/docs/fonts#how-do-i-use-a-custom-font) 3. [My font is missing, or the live page doesn't look like the preview](https://themespot.app/docs/fonts#my-font-is-missing-or-the-live-page-doesn-t-look-like-the-pr) 4. [Troubleshooting checklist](https://themespot.app/docs/fonts#troubleshooting-checklist) 5. [Brand-kit font missing after a theme deploy (HubSpot defect)](https://themespot.app/docs/fonts#brand-kit-font-missing-after-a-theme-deploy-hubspot-defect) [![themespot](https://themespot.app/hubfs/themespot-1.svg)](https://themespot.app/?hsLang=en) Runs alongside HubSpot. Never replaces it. Your site is yours, forever. ThemeSpot is the bonus. All systems normal - Legal - [Privacy](https://themespot.app/privacy?hsLang=en) - [Terms](https://themespot.app/terms?hsLang=en) © 2026 ThemeSpot HubSpot is a trademark of HubSpot, Inc. ThemeSpot is not affiliated with or endorsed by HubSpot.