Skip to main content

Hi there: 

In order to match our brand guide, our content authors need to use a Google Custom Font within the drag & drop interfaces. From a technical angle, I’ve been modestly successful using code included in the <head> of the file, but this won’t be a workable solution for the fully-GUI version of how our editors author content. 

Therefore, the Iterable/built-in font customization option (wituin the UI) is likely the best scenario. However, it doesn’t seem to allow for Google Fonts to be imported directly from the Google Font URL. My questions are: 

1 - Has anyone successfully used the Google Custom Font within the GUI version of the font customizer? If so, which URL did you provide it? 

2 - Alternatively, we can host the font on our servers and serve the font URL. However, question: what format is Iterable expecting - or can it handle? For example, .WOFF? This would help us understand how to configure our settings such that they work with the Iterable UI. 

3 - Any other tips/tricks to know about? The Iterable help article on the same has been somewhat helpful (e.g., fonts into the header) but unhelpful for the UI-based route we need to go to suit our CMs. 

Thanks!

--Dave

Hi Dave,

Thank you for your questions regarding using Google Custom Fonts in Iterable’s Drag & Drop interface:
 

Has anyone successfully used the Google Custom Font within the GUI version of the font customizer? If so, which URL did you provide it?

Yes, you can use Google Custom Fonts within the GUI version of the font customizer in Iterable. You need to provide a URL to the CSS file containing the font definitions. Examples of valid URLs from Google Fonts are:

  • https://fonts.googleapis.com/css?family=Lobster
  • https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap

Make sure to enter the exact font name in the "Font Name" field within the font customizer.
 

Alternatively, we can host the font on our servers and serve the font URL. However, question: what format is Iterable expecting - or can it handle? For example, .WOFF?

Iterable (via the Bee Editor) does not support direct links to font files such as .woff, .otf, or .ttf. Instead, it requires a link to a CSS file that references the font. If you host the font on your servers, create a stylesheet (CSS file) that includes the @font-face declarations referencing your font files.

For example:

@font-face { font-family: 'CustomFont'; src: url('https://yourserver.com/fonts/customfont.woff2') format('woff2'), url('https://yourserver.com/fonts/customfont.woff') format('woff'); }

You can then provide the URL to this stylesheet in the "Font URL" field in the drag & drop editor.

Also, please note that the URL must use HTTPS protocol with a valid SSL certificate. To allow Iterable to access the custom font file, the host must have cross-origin resource sharing (CORS) enabled.

 

Any other tips/tricks to know about?

Here are additional tips and considerations:

  • Email Client Compatibility: Not all email clients support custom fonts. Gmail, for example, only supports Roboto and Google Sans. Always specify fallback fonts in the "Font family" field, such as 'Roboto', 'Arial', 'sans-serif'.

  • Caching Issues in Bee Editor: If you enter an incorrect font URL, Bee Editor might cache it, making it difficult to update. Possible solutions:

    1. Start over with a new template.
    2. Select a different font, save, and then reselect the original font.

  • Font Variations: Ensure that the CSS file includes all required font weights (e.g., bold, italic) to use them in the editor.

  • Helpful Resources:

By following these steps and using proper font URLs, your content authors should be able to use Google Fonts seamlessly within Iterable.

Let me know if you have further questions!

Best,
Cheska

Reply


Terms & ConditionsCookie settings