Having trouble with your custom font? Check the troubleshooting section.
Configuring the font
Set Body font family
global.fonts.families.body
This will apply globally, however it might still be possible to apply different font to some sections if we want to. E. g. banner.title.font.family
Note that this is an array.
Set Font Sizes
global.fonts.size.large
global.fonts.size.medium
global.fonts.size.small
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.
global.fonts.weights.normal
global.fonts.weights.semiBold
global.fonts.weights.bold
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)
global.fonts.googleFontFamily
Font Family Name (Must match CSS font family name)
global.fonts.customFont.name
Font Url
global.fonts.customFont.url
Either its external url or your local fonts.css (with different fonts in it).
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.
global.fonts.customFont.fallbacks
Advanced Options
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
Troubleshooting
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.
You'll know you have a CORs error if you see something like this in your javascript console.
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.
Legacy
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.