Having trouble with your custom font? Check the troubleshooting section.
Step 1: Load the fonts
Custom Fonts through theme
If you're making a custom theme, the best and easiest way is to declare the font in fonts.json
Step 2: Configure font
Set Body font family
Currently, we only set the body font, we may support more than one font on the same page. Note that this is an array.
Set Font Sizes
Set Font Weights
If you load a custom font, you must make sure to load the desired font weights and set these variables accordingly if they do not match your font.
Custom Font Through UI vars:
The custom fonts through the UI are loaded differently. This is what happens under the hood. Note, however, the above configurations still apply, but it's loading the data a different way.
Force Google Font (if using build in Google fonts)
Font Family Name (Must match CSS font family name)
White listing the font's hosted domain
For security reasons, the browser may block the custom font you set, because it comes from a third party. To ensure this doesn't happen, you should add the domain of your font URL to the trusted domains.
ContentSecurityPolicy.ScriptSrc.AllowedDomains = ["www.example.com/myFont.css"]
Fall back fonts (options)
We already have good standard font family fallbacks set, but you can optionally set others.
Often times, the line height of a font is much bigger than the font ascenders/descenders. This can make the top of texts seem off and not aligned with adjacent elements. The heading alignment is the most common problem, so we have some variables for that.
global.fonts.alignment.headings.capitalLetterRadio // What percentage of the line height does the font take (test with highest ascenders/decenders. Example text: "TgylyH" <- (has both ascenders and decenders)
global.fonts.alignment.headings.verticalOffset // If the font is not centered, use to adjust text vertically
global.fonts.alignment.headings.horizontalOffset // If the font is not aligned with the left edge of the container, use to adjust it
My Custom Font Isn't Loading
There are a few things that could prevent your font from loading.
- Make sure the custom font name you are using matches the one in the
css file you added.
- You may be having an issue with CORs headers on the font you are loading. The server you load the font from must set headers to allow access to your site's domain.
Access to font at 'https://some-domain.com/path/to/font.ttf'
from origin 'https://forum.mysite.com'has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Google Fonts allows any domains in their CORs policy so you should generally never see this message.
Services like Adobe TypeKit and Fontsquirrel generally have some user interface where you are required to whitelist a domain (or domains) for your font.
If you are hosting custom fonts yourself, see this guide for enabling CORs on your server.
In our first iteration of custom fonts, we used
customFontUrl, which will be removed in a future iteration, so do not use. It's still here for compatibility until we refactor it out in a future update.