timer ~ 8 min read
99300 views
rate it
15 November

How to Add and Use Custom Fonts with Stripo

Stripo / Blog / How to Add and Use Custom Fonts with Stripo

On November 26th, 2018, we released a new option — now with Stripo, you can add custom fonts to projects in just a few clicks with no HTML skills. Why is that important?

It’s not a secret that a good copy complements the email design and convinces customers to make a purchase.

Usually, custom fonts are used to make the text copy brand consistent and appealing. And by wrapping it in a font that best matches the situation and the email design, you make your copy noticeable and good-looking. Thus, quite often, web-safe fonts are not enough.

Stripo Custom Fonts Banner Example

In this case, you will need to deal with custom fonts.

Watch a short video that explains how to add custom fonts with Stripo. Please note that this feature is available for paid plans only.

How to add custom fonts with Stripo

Most ESPs and email builders offer only web-safe fonts while Stripo offers four sets of them:

The sets of fonts Stripo offers

Stripo offers four sets of fonts for your emails:

1. Standard/web-safe fonts

Arial, Comic Sans MS, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, and Verdana are the most popular fonts, as they are widely used by websites and are correctly displayed by most email clients.

Stripo Custom Fonts Arial

2. Non-standard fonts

These are the fonts some professionals still argue about whether they are web safe or not. But they are commonly used on the web. For example, Playfair Display is featured on almost 1.1 billion websites, popular mostly in the USA and Western Europe.

Stripo Custom Fonts Display Fair

Note: did you know that you can decrease the number of standard and non-standard fonts for your projects if you find some excessive?

How to remove unnecessary fonts from the list:

  • go to the project settings in your account;

  • find the standard/non-standard fonts tab;

  • click the switch button to remove the font from your list.

3. Banner fonts

They are decorative and can be applied to banners only, as any text you place over banners will be considered an image element. Consequently, it will be correctly displayed on all devices, no matter which font you apply.

Stripo offers over 40 of them.

Stripo Custom Fonts Banner Font Example

You see the list of these fonts only when working with a caption over banners.

4. Custom fonts

With Stripo, you can add absolutely any font you like.

There are no limits to the number of custom fonts to add.

Once you install new fonts, apply them to the menu and texts — to all copies in emails except banners.

How to add a custom font to your project settings with Stripo:

Once again, I want to emphasize that this is a very simple process, as you don’t need to make any changes to the email’s HTML code. Another great news is that you don’t need to set the same new fonts for every email template you work with — you set them for entire projects. They are available on your list throughout all your campaigns within these projects.

Step 1. Google

First, you need to find the font you like the most. I loved the Great Vibes I found on Google Fonts. Besides 1,000+ fonts, Google also offers popular pairings with them.

  • so, you need to select the font, scroll down to the “Styles” section, and click the “plus” sign;

Google Custom Fonts _ Stripo

  • then, click on the “View selected families” icon in the upper-right corner of the webpage;

View Selected Families in Google Fonts

  • in a pop-up window, copy the link — it is highlighted in the screenshot below.

Stripo Custom Fonts _ Embedding Your Link

Step 2. Stripo

To install it to your account with Stripo, you need to:

  • click on the account name at the top-right corner of your screen;

  • select “Organization settings”;

Adding a Custom Font to Your Stripo Account

  • to the left, you will see “Projects” — click on the tab;

Stripo Custom Fonts _ Your Projects

  • select the project you are going to enrich with a new font (I have only one);

  • click the “Settings” button;

Custom Fonts _ Project Settings In Stripo Account

  • scroll down to see the “Font management” section;

  • click the “Add custom font” button (I already have three custom fonts);

Stripo Custom Fonts _ Click to Add Your Custom Font

  • in the pop-up form, name the font, insert the embed URL link, and enter the font family specified by Google;

Connecting Your Custom Font

Note: for your convenience, we strongly recommend giving real names to the uploaded fonts.

  • once you fill out all the fields correctly, click “Connect”.

You will find the new fonts in the drop-down list while editing your email.

How to add non-Google custom fonts to your project settings with Stripo

If you couldn’t find the perfect option on Google Fonts, no worries! You can add any custom font to your Stripo account by uploading a link to this font. 

You can also use your own custom-made fonts: 

  • upload the font files to open cloud storage or file sharing platform;

  • make sure the files are available to view so that users can see them;

  • add the Access-Control-Allow-Origin header to your font files to prevent them from being blocked by the browser;

  • add the links to your Stripo account in the way we described above. Make sure your links start with “https” and aren’t surrounded by any quotation marks. 

Here is an example of how to add a custom font to your Stripo account with Adobe Fonts:

  • go to Adobe Fonts;

  • choose the font you like and hit the </> button;

Choose Your Custom Font In Adobe Fonts

  • enter your project name;

  • choose the font weights and styles;

  • click the “Create” button;

Adobe Fonts _ Add a Font to a Web Project

  • copy the link;

Adobe Fonts _ Copy the Link

  • follow the same steps we described above to add this font to your Stripo account.

Note: if you want to use fonts from Adobe Fonts, you won’t be able to do it without a Creative Cloud subscription.

Activating Fonts In Adobe Fonts

How to use custom fonts in emails

You are welcome to apply any font you like to text blocks and menus to make your emails vivid and unique. But be sure to test them for compatibility with the top email clients.

Note: if an email client does not have support for the font you’ve chosen, the client will replace it with a default one (most email clients have two default fonts).

Not only does Stripo strongly recommend you to test emails/fonts with Email on Acid or Litmus, but also to send this email out to all your email addresses to see what your font looks like in reality.

For my test, I’ve chosen the Alumni Sans font. Our email testing tool showed that most devices and email clients would replace this font with the default ones. From the screenshots below, you can see that Apple Mail displayed the Alumni Sans font correctly, while Outlook 2019 replaced it with its default font.

Testing Custom Fonts In Multiple Email Clients

Email clients that support custom fonts in emails

There are only a few of them:

  • Apple Mail (default font — Helvetica);

  • Apple iPhone (default font — Helvetica);

  • Thunderbird (default font — Impact);

  • Outlook app for Android, iOS, and Mac (default font — Calibri);

  • Android native email app (default font — Roboto).

Note: you can’t be completely sure whether your custom font is supported by these email clients, so it’s crucial to test your message before sending it out. 

When choosing a new font for emails, remember:

  1. Only some email clients support custom fonts.

  2. Sans-serif fonts provide easier perception and are more appropriate for formal texts and business newsletters.

  3. It takes one longer to read a text written in serif for people with visual impairments and dyslexia, yet it works better for promo emails.

  4. For HTML emails, 14 px is the best font size, yet for mobile devices, it is 16 px.

  5. To make your emails accessible, avoid white backgrounds and center-aligned texts.

  6. In your Stripo account, you can add new fonts and remove the ones you don’t use for particular projects.

Wrapping up

Custom fonts can be an awesome tool to make your emails look professional and recognizable, but it’s vital to test your messages before sending them out. Add decorative fonts to your account and use them to spice up your email newsletter templates.

Enrich your emails with custom fonts

Dave Myron 2 years ago

Can you update this article to include using non-Google custom fonts?

Hanna Kuznietsova commented to Dave Myron 2 years ago

Dave, Hello... Thank you for your question. We will update the post soon ? As for non-Google custom fonts: You can add custom fonts to your Stripo account only by uploading a link to the selected font. For example, the Adobe Fonts site https://fonts.adobe.com/collections offers links to the fonts and their description ("font-family") for entering information in the proper fields. The embedding link provided by Adobe Fonts needs to be converted to the format specified in the article or input field: it must start with https; no quotes before and after the link. Please do everything as you would do to Google Fonts, as shown in the video. https://www.youtube.com/watch?v=U2X3CLN01zA You can also use your fully custom fonts. Just upload them on your website, and then add the link to your Stripo account. Proven - Adobe fonts work well :) If you need more detailed instructions with screenshots, please write to us at contact@stripo.email.

Reinhard Jung 2 years ago

Hey, thanx a lot!

Hanna Kuznietsova commented to Reinhard Jung 2 years ago

Reinhard, Thanks for your supportive feedback. We're glad you liked it :)

Arsen Malashchuk 3 years ago

А если понравившийся шрифт не представлен на Google Fonts, как тогда его добавить?

Hanna Kuznietsova commented to Arsen Malashchuk 3 years ago

Arsen, Спасибо за обращение. Добавлять кастомные шрифты в Ваш аккаунт в Stripо можно только лишь подгружая ссылку на выбранный шрифт. Например, сайт Adobe Fonts https://fonts.adobe.com/collections предлагает именно ссылки к шрифтам и их описание ( "font-family", обычный это шрифт или курсив) для введения информации в соответствующие поля. Ссылку для встраивания, которую предоставит Adobe Fonts, вам нужно привести к формату, который обозначен в статье или поле для введения: начинаться она должна с https; никаких кавычек до и после ссылки. Делайте, пожалуйста, все по аналогии со шрифтами Google Fonts, как показано в видео. https://www.youtube.com/watch?v=U2X3CLN01zA Проверено — шрифты Adobe подгружаются и работают :) Если же Вам понадобится более подробная инструкция со скриншотами, — пожалуйста, пишите нам на contact@stripo.email. Будем рады помочь.

Евгения Землянская commented to Hanna Kuznietsova 2 years ago

а если есть только файл со шрифтом? Его никак не загрузить?

Hanna Kuznietsova commented to Евгения Землянская 2 years ago

Евгения, Спасибо за Ваш вопрос. Для использования кастомного шрифта, нужна именно ссылка на него, которая заканчивается на .css Если же Вам не подходят шрифты Google и Adobe, то Вы можете загрузить кастомный шрифт на свой сайт. И дальше добавить его в личный кабинет Stripo согласно инструкции, приведенной в данной статье. Важно: доступ к данному шрифту должен быть открыт всем.

You might be interested in

previous next
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
best-fonts-for-email-cover-image-stripo
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they had....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s