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
Example:
[
{
"type": "url",
"name": "Nunito",
"fallbacks": "",
"url": "https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap"
}
]
Step 2: Configure font
Set Body font family
global.fonts.families.body
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
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
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
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.