You can now upload and use your custom fonts on your website with just a few clicks and no custom code. Below, we’ll highlight the new Fonts tab and how to upload your favorite font!
While custom fonts are available on the website, custom fonts are not available on the mobile app.
Accessing the New Fonts Tab
There is now a new Fonts tab under the Storage navigation option. This is where you can upload and manage your custom fonts. To find this tab, go to your Web Dashboard and navigate to Storage → Fonts.
Alternatively, you can access the Custom Fonts section directly via the Theme Editor under Typography.
Fonts uploaded here will be available to be used as custom fonts in your Theme Typography options.
Make sure that you only upload fonts you have the proper license for!
File Types & Using Your Font
Font File Types
This is the standard file upload interface Subsplash provides. When selecting your font files, make sure they are one of the following file types: .otf, .ttf, .woff, .woff2
When the new font is uploaded, it will be previewed in the Storage panel and details are accessible on the right Details panel when the font is selected.
Using Your Custom Font
To use your new custom font, navigate to the Theme Editor in your SnapPages Dashboard and locate the Typography options within the theme settings.
Select the font location that you would like to use a custom font for, and click the font type dropdown arrow.
You will see the new My Fonts option in the font selector, with the new custom font you uploaded.
When you select the new font, it will be immediately displayed in your site preview. You can also select Upload New Font to upload a new font directly from this panel, following the same flow as above. That font will be immediately usable and manageable in Storage → Custom Fonts.
If the font doesn't display correctly, ensure the file was uploaded successfully. Remove and re-upload the font if necessary, and double-check the typography settings.
You can upload more fonts by re-doing these exact steps. Enjoy using your custom fonts!
Adjusting Font Colors for Readability
If the font color on your media page or other site sections is not readable, follow these steps:
Open the relevant page in the Page Editor.
If the Page Editor options are not sufficient, navigate to the Theme Editor.
Adjust the color settings for the text elements within the Style settings of your theme.
Preview the changes and ensure readability on all devices.
Maintaining Theme Consistency Between Preview and Published Versions
To ensure your published site matches your preview:
Ensure that changes, such as font choices, are saved in the Theme Editor.
Click Publish in the Theme Editor to apply the changes to your site.
Revisit the Preview to confirm the changes are reflected and consistent with the live version. Avoid leaving changes as drafts, as they won’t appear in the preview.
Troubleshooting Common Font Issues
Incorrect Custom Font Display:
Verify that the font files were uploaded successfully in the Theme Editor.
Delete the problematic custom font and re-upload it.
Reassign the font in the typography settings, save your changes, and republish the theme.
Font Style Defaults to Arial or Unexpected Typefaces:
Remove the affected font file from the typography settings.
Re-upload a verified and compatible font file.
Publish the theme to ensure the correct font displays site-wide.
Steps Overview
Upload a new font in the Storage → Custom Fonts tab.
Go to Theme
Edit Theme (from 3 dot menu)
Go to Typography
Pick the typography element you would like to update
Select font
Pick your new custom font under My Fonts
Preview, save, or publish your new font!