Go to Stripo
All Collections
Editor Questions
Additional Features
How to add/manage custom fonts to email templates?
How to add/manage custom fonts to email templates?
In this article, you can find information on how to add custom fonts in Stripo.
Yevgenia Dolinkina-Dremina avatar
Written by Yevgenia Dolinkina-Dremina. Updated over a week ago

We do believe that visuals can increase email conversion rate. The secret is to use powerful visuals that give users a reason to read your email, but not just skan, click on your CTA, and reach your conversion goals :)

A custom font can be considered one of those visuals that give you brand recognition in the long term; a custom font targets the necessary audience, increases readability and draws more attention to your content. And Stripo has all instruments to reach this goal - you can easily add your custom font directly into the template in a few minutes.

Unfortunately, not all email clients support Web/custom fonts. In general, web/custom fonts work in the:

  • iOS Mail

  • Apple Mail

  • Android (default mail client, not Gmail app)

  • Outlook 2000

  • Outlook.com app

  • Thunderbird

Outlook limitations:

It's important to mention that Outlook 2007/2010/2013/2016/2019 is incompatible with any custom or web fonts. It only supports traditional web-safe fonts. Sometimes other fonts may display if they are physically installed on the computer.

Gmail limitation:
Gmail does not support Web fonts, even including Google fonts. While Gmail supports the next web fonts - Google Sans and Roboto.


Here is the small instruction on how to edit embedded fonts:

  • Go to the "Projects" settings and scroll down to see the "Font Management" section;

In this section, you can edit, enable or disable the displaying and access to Stripo embedded fonts list, and also, in addition to standard and nonstandard Stripo fonts, you can add custom fonts to the editor.

First of all, what about embedded fonts? You can disable any standard and non-standard font and change the font family to any of them. To change it, you should click on the pen icon:

After that, you will get the pop-up window where you can change the font family:

To install the custom font in the Stripo account, you need to:

Please be advised that the option of adding custom fonts is available with BASIC, MEDIUM, PRO, or PRIME plans.

  • Click on the "plus" button near the "custom" font caption;

  • In the drop-down form, name your custom font, paste the font URL, insert the font family, and hit the connect button.

Please be kindly advised that Stripo accepts font URL in css format only.

This URL must be delivered on the HTTPS protocol, with a valid SSL certificate. Also, Policy CORS must be enabled in the host to deliver the font files.

Another important note: we strongly recommend you give custom fonts their real names.

In addition, watch our step-by-step video tutorial on how to add fonts in Stripo.

Find your custom font in the text block of the email template.

  • Click on the text block where you want to apply a custom font and proceed to the editing panel on top of the screen;

Additionally, check how to directly change your font-weight value in the code to the current styles of needed text.

As a sample, let's do the word "Juneteenth" extra bold:

Please check the sample of the code to the tag <H1> for this case: <h1 style="font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight:900;">Juneteenth</h1>

were font-weight:900; is necessary addition

Great job:)

Would you like to add your custom font, which is not present on Google fonts?

Please be advised that if you have a license for a paid custom font and want to use it in emails, then you need to:

  • Create a CSS file in which you describe the styles for connecting this font to your server;

The example of the code in the css file should be as follows:

@font-face {
font-family: 'custom_font_name';
font-style: normal;
font-weight: 400;
src: url('absolute_path_to_font_file') format('woff2');
}

Where an absolute_path_to_font_file should look similar to this:

https://website.com/fonts/customFontName.woff2

  • Add a link to this CSS file into your account in Stripo as it was described above;

After you add a custom font, please check a few additional things:

  • check CORS policy for your fonts in some cases, it requires manually setting of CORS Headers. You can find more about CORS policy here;

  • we do not limit the use of formats (woff, woff2, ttf, otf, etc.);

  • please be advised that not all fonts are supported by all the email clients. Some of them will be changed to a particular font by default. For example, Gmail cuts the custom font that you have in your email and changes it to one of 11 standard ones. The same thing with font weights, some email clients support only 400 and 700 Regular and Bold at the moment;

Thank you for taking the time to read our articles. We hope you will find this information helpful.


If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.

Did this answer your question?