Skip to main content

How do I use fallback fonts in my email?

b
Written by bridget O'Neill

What kind of fonts can I use in Obello:

We currently support OTF and TTF file types.

You can use custom brand fonts, web-safe fonts, and Google fonts in Obello.

Web-safe fonts are pre-installed on the vast majority of computers, mobile devices, and operating systems, ensuring consistent display and high readability across all browsers and email clients.


Where do I set my fonts in an Obello email template?

In Obello, there are a few ways you can set fonts you can set in your email:

  1. Display Font: In Typography Settings, the Type panel defines the default display fonts and settings for each text style (H1, H2, H3, Paragraph). These settings act as global defaults. When a text element is added to the canvas, it uses the font and settings defined for that style.

  2. Element Font: the font you select in the Email Builder canvas per element, in this case text boxes (eg., heading). This overrides the default Display font. You can select the element font by clicking into the text you want to adjust and selecting the font from the floating toolbar. You can choose from custom brand fonts, web-safe fonts, and google fonts.

  3. Fallback Font: If you've selected a non-web-safe font in elements in HTML blocks, the ability to set a fallback font will appear under Typography settings. You can only choose from web-safe fonts.


Which fonts will show in inboxes when an email is sent out?

Free Form Blocks:

  • Any font you use in Free Form blocks will remain the same no matter the inbox because Free Form blocks are exported as a flat image, not live HTML


HTML blocks:

Font used in HTML blocks will adjust depending on whether or not the inbox can render the font you selected.

If you are using a web-safe font, that font will appear in inboxes.

If you are using a non-web-safe custom brand font, the font displayed will follow this logic:

  • The system attempts to render the element font first.

  • If the element font isn’t supported, it then attempts to render the display font

  • If the display font isn’t supported, the fallback font is used.

Did this answer your question?