Using Custom Fonts

Add a custom font to your automations, campaigns, forms & link in bio to match your store branding.

Updated over a week ago

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 Loyalty > Rewards Program >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.

Group_1__26_.png

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.

Screenshot_2023-04-11_at_11.15_1.png

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

Screenshot_2023-04-11_at_12.18_1.png

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.

Did this answer your question?