Key terms
Custom font: Any font that isn’t provided by default in the Marsello font editor
Web font: A custom font that must be loaded from an outside source, external to Marsello
Web-safe font: A font that is stored locally on most devices, therefore these don't need to be loaded from an outside source to be displayed
Fallback font: A web-safe font that is used in inboxes that don’t support your custom font, these are to be added to the CSS Value field
How to add a custom font
1. In your Marsello admin, head to Settings > Loyalty > Loyalty settings
2. In the settings page, select Brand
3. Scroll down to Custom Web Fonts and select Register Web Font
4. Enter the Label, CSS Value and Font URL, then click Save Font
📝 Note: Ensure you also have a fallback font added for unsupported mailboxes
5. Your Custom Font will now be saved. You have the option to add multiple custom fonts or edit/delete your custom font at any time by clicking Actions > Edit or Delete.
Apply a custom font
When a custom font is added, it will then be available to select from the drop-down font box across your email automation, campaigns, forms, and link in bio. Below, we'll view an example of selecting your custom font within an email campaign.
Simply select a section of text within your email campaign and locate your custom font from the drop-down list.
Preview your custom font
Campaigns & Automations
Once your custom font has been uploaded, select your font within your email campaign, then click Send Preview within the email editor. Try opening the email on a variety of devices to see how it will appear to different recipients.
Forms
Apply your custom font to the text within your form, click Save Changes, then head back to the Forms page, click the drop-down arrow to the right of the form, then select Preview.
📝 Note: once you have saved changes, these will be live. However, you can go back and edit the font at any time
Link in Bio
Apply your custom font to the text within your link in bio page, click Save Changes, then view your link in bio URL to view the updated font.
📝 Note: once you have saved changes, these will be live. However, you can go back and edit the font at any time
Custom font support and limitations
You can use Google Fonts, Adobe Typekit, or self-hosted fonts within Marsello. Please keep in mind that custom fonts are only supported by certain inboxes, and many popular inboxes (such as Gmail and Yahoo) do not support custom fonts.
Custom fonts can help keep your marketing cohesive, aligning your email content with your branding. However, web fonts (i.e., fonts loaded from an outside source, as opposed to being available within the device’s storage) may not appear as expected on all devices or email clients.
Email clients that do support web fonts include:
Apple Mail
iOS Mail (the default email browser on iOS)
Google Android (except Android 2.3, which doesn’t support the @import method used by Google and Adobe fonts)
Samsung Mail (Android 8.0)
Outlook for Mac
Custom fonts in Gmail and other unsupported inboxes
Your customers who use Gmail (or other inboxes that don’t support custom fonts) may see your fallback font (which you can set in your CSS Value field when registering your custom font), rather than the custom font you choose. Consider selecting a web-safe custom font, which is available on most devices.
Find web-safe fonts here, along with a breakdown of support by device.
About fallback fonts
With all types of custom fonts, you will need to select a fallback font. This font will appear for recipients using inboxes that don’t support your custom font. Choose a font from the list of available options that is similar in style to your custom font.
For example, if you use Inter (a Google font) as your custom font and Sans Serif as your fallback font, email recipients will see the following fonts:
Recipients who open your email in a browser that supports web fonts (e.g., Apple Mail, iOS Mail) will see the Inter font
Recipients who open your email in a browser that does not support web fonts (e.g., Gmail) will see the Sans Serif font
Add additional font variants to an existing custom font
1. Click edit to access your existing custom font
2. In the CSS Value field, enter your fallback font. In the example below, the custom font is Inter and the fallback font is Sans Serif
Alternative supported fonts
Adobe fonts
Adobe fonts are only available to users who have an active Adobe Fonts subscription. To add an Adobe font, copy the URL into the font URL field. The address should follow this format: https://use.typekit.com/123ABC.css
Add a fallback font to the CSS Value field, then click Save Font.
Imported fonts
Imported fonts, sometimes called self-hosted fonts, are recommended only for senders who have access to a developer. To use an imported font, you’ll first need to host the font, either on your servers or using a font-hosting service. Make sure to enable Cross-Origin Resource Sharing (CORS) by setting the Access-Control-Allow-Origin header to *, so the font can be accessed by your recipients’ inboxes. Learn more about CORS.
Merchants also searched for: suppyort