# Add custom fonts

<Hint type="info" title="Applies to:">
  All FoxEcom themes
</Hint>

Add custom fonts to match your brand identity and create a consistent look across your store. Follow the video below to upload and apply custom fonts in your FoxEcom theme.

### Before you start

<Hint type="warning">
  **This involves editing code**. Adding a custom font means uploading font files and writing CSS, so you need to be comfortable working in your theme's code editor.

  CSS variables differ between FoxEcom themes, so the rules you write for one theme will not always carry over to another. If you are not sure which variables your theme uses, contact us before editing — live chat, or [happytohelp@foxecom.com](mailto\:happytohelp@foxecom.com). We will point you at the right ones.
</Hint>

* Use web-friendly font formats such as `.ttf`, `.otf`, `.woff`, or `.woff2` whenever possible. `woff2` provides the best balance between file size and browser compatibility.
* Upload only the font weights and styles you plan to use.
* Make sure you have the appropriate license to use the font on your website.
* Duplicate your theme before you start, so you have a copy to fall back on. [Check how to create a custom CSS file](https://docs.foxecom.com/hyper-theme/guides/advanced-and-developer/add-custom-css#method-2-add-css-through-a-custom-css-file-in-the-theme-code)

## Instructions

<Embed url="https://youtu.be/HB57Suv4e0A" />

## Best practices

* Use as few font families as possible.
* Reuse the same font for headings, body text, and navigation whenever you can.
* Choose system fonts if performance is your priority.
* Avoid uploading large font files or unused font weights.

## Troubleshooting

### My custom font doesn't appear

* Clear your browser cache, or open the store in a private window. Browsers hold on to the old stylesheet longer than you would expect.
* Check that the font file finished uploading and appears in your theme's assets.
* Compare the font name in your CSS against the name in the @font-face rule. They have to match exactly, including capitalization.
* Check the file path in @font-face. A font loaded from the wrong path fails silently — nothing breaks, the browser just falls back to the next font in the stack.
* Confirm the CSS variable you overrode is the one your theme actually uses. These differ between FoxEcom themes, so a rule copied from another theme's instructions may be setting a variable that does nothing here.

### The font looks different than expected

* Check that you've uploaded the correct font weight and style. A browser asked for a weight you did not upload will synthesize one, and the result looks heavier or more slanted than the real thing.
* Make sure the font supports the characters used in your store language. Missing glyphs are replaced from a fallback font, so a few characters end up in a different typeface.
* Check the font-weight and font-style declared in each @font-face rule. If two weights are declared with the same value, the browser uses whichever it loaded last.
* Look at the font size and letter spacing in your theme settings. A custom font rarely matches the metrics of the one it replaced, and the sizes that suited the old font may need adjusting.

### The font applies in some places but not others

* Headings, body text, and buttons draw from separate variables. Setting one leaves the rest on the theme font.
* Check whether a section or block is overriding the font locally — some blocks let you pick between the heading and body font in their own settings.
* Apps that inject their own markup, such as review widgets, bring their own styles and will not pick up your font.

### Text flickers or shifts as the page loads

* This is the browser drawing a fallback font first and swapping it once yours downloads. It is normal, but heavy font files make it worse.
* Upload `.woff2` rather than `.ttf` or `.otf` where you can, and remove any weights you are not using.

<Hint type="info">
  Still stuck? Get in touch on live chat or at [happytohelp@foxecom.com](mailto\:happytohelp@foxecom.com). Tell us which theme you're on and send the CSS you added — the variables differ between FoxEcom themes, and that is usually where the problem is.
</Hint>