Custom fonts are those that aren't built into your system. They include fonts you purchase or specially branded fonts your company uses. If you don't see the font you want to use in Builder by default, but you have the font files, upload them to Builder for use in your projects.
Tip: Any fonts already installed in your Shopify theme or site's CSS automatically work with Builder and Builder Theme Studio–you do not need to add them separately.
To upload your custom font:
- Go to your Space Settings.
- Find the Custom Fonts option and click the Edit button.
- Click + Custom Font.
- Complete the font form by choosing a font name, uploading your font file, and determining whether your font is serif or sans-serif.
- Click the Save button.
In the Visual Editor, take the following steps:
- Select a Text block.
- Go to the Style tab.
- Scroll down to the Typography section.
- Click the Font dropdown to find your custom font.
If you are encountering issues with your fonts not displaying in the Visual Editor, or on your live site, try the following solutions:
- Confirm your fonts have been uploaded to your Builder Space, and that those fonts are being used within the Visual Editor.
- Review your application's CSS to ensure fonts are not being overwritten by the
!importantrule. If you have fonts applied specifically to elements, you may need to exclude the application of font rules to Builder classes.
/* Apply default font but exclude Builder elements */
*:not([class*="builder"]):not([class*="css-"]) {
font-family: Helvetica Neue, sans-serif;
}If you are still unable to see or select your fonts, try adding them manually to your content entry's JSON:
- In the Visual Editor, press
Cmd+Kfor Macs, orCtrl+Kfor other machines. - Search for "json" and open the JSON editor
- Add your custom fonts to the customFonts array, in the format shown below.
{
"fileUrl": "https://cdn.builder.io/o/assets/...",
"family": "Your-Font-Name",
"category": "sans-serif",
"isUserFont": true
}Finally, you may wish to update your Builder SDK to the latest version, as font-related issues may have been fixed in later versions.
To explore more of what you can do with Builder, explore Popular Tutorials.