Design Templates How-to
~ 6 min read
8 comments
43573 views
rate it
06 December 2018

How to Add and Use Custom Fonts with Stripo

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

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

It’s not a secret that a good copy complements the email design and convinces customers to make a purchase.
Make the text copy emotional. And by wrapping it in a font that matches the situation and the email design best, you make it noticeable, good-looking and appealing. Quite often, the 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.

Most ESPs and email builders offer only web-safe ones. While Stripo.email offers 4 sets of them:

The sets of fonts Stripo offers

Stripo offers 4 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, 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 10 fonts some professionals still argue whether they are web safe or not. But they are commonly used on the web. For example, Playfair Display is featured in almost 1.1 billion websites; it’s 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?

In your account:

  • go to the project settings;
  • find standard/non-standard fonts tab;
  • click the switch button to remove the font from your list.

Stripo-Custom-Fonts-Removing-Standard-Fonts

3. Banner fonts

They are decorative and can be applicable 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 applied.

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, 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.

First of all, you need to find the font you like the most. I loved the Great Vibes I found on Google.fonts. Not only provides Google with about 1,000 fonts but also offers popular pairings with them.

So, you need to select the font, then click the “plus” sign.

Stripo-Custom-Fonts-Google

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

Stripo-Custom-Fonts-Embedding-the-Link

In order to install it to your account with Stripo, you need to:

  • at the top-right corner of your screen, click the account name;
  • select “Organization settings”;

Stripo-Custom-Fonts-in-Emails-Account

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

Stripo-Custom-Fonts-Projects

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

Stripo-Custom-Fonts-Project-Settings

  • scroll down to see the “Font management” paragraph;
  • click the “Add custom font” button (I already have three custom fonts);

Stripo-Custom-Fonts-Click-to-Add-Custom-Font

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

Stripo-Custom-Fonts-Adding-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”.

In the drop-down list of fonts, you’ll find the new ones.

How to use custom fonts

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 and various devices.

Note: if an email client does not support 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 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 Great Vibes font. Our email testing tool showed that most devices and email clients will replace the Great Vibes font with the default one Arial (if there’s no Arial in your OS, then Gmail applies Helvetica). But in fact, my custom font worked well in my Inbox.

Stripo-Custom-Fonts-Example

(Email client — Apple Mail; OS — MacOS)

Email clients that support custom fonts in emails

There are only a few of them:

  • Apple Mail;
  • iOS Mail;
  • Thunderbird;
  • Outlook app for Android, iOS and Mac;
  • Android native email app.

Note: Gmail app replaces customs fonts with similar supported ones.

When choosing a new font for emails, remember:

  1. Only some email clients support web fonts;
  2. Sans-serif fonts provide easier perception, and is more appropriate for formal texts and business newsletters;
  3. It takes one longer to read a text written in serif, 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. In order 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.

Add to your account and use decorative fonts to spice up your email newsletter templates.

Dave Myron 1 month ago

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

Hanna Kuznietsova commented to Dave Myron 1 month 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 5 months ago

Hey, thanx a lot!

Hanna Kuznietsova commented to Reinhard Jung 5 months ago

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

Arsen Malashchuk 1 year ago

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

Hanna Kuznietsova commented to Arsen Malashchuk 1 year 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 6 months ago

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

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

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

You might be interested in

← previous next →
3 days ago · 11 min read
How to Write an Effective Event Reminder Email

Now that customers are used to receiving tons of promotions, only sincere concern and appreciation may attract their attention to an email marketing campaign. And event reminder emails are a good way to do it. Once people have purchased your products, be it a ticket to a conference or a video tutorial, you may think that your mission is done here. But humans, being extremely busy, tend to forget about any kind of event. And we need to politely remind...

Design Marketing Templates
SaaS Churn Rate
8 days ago · 8 min read
10 Best Tips to Reduce Customer Churn Rate for SaaS 

With SaaS services spending 5 times more to acquire a new client than keep an existing one, reducing SaaS churn rate should be among the top priorities for all businesses.  In this post, we’ll survey the most effective ways to decrease your churn rate and increase the number of loyal customers. But first things first… What is SaaS churn rate? SaaS churn is the percentage of clients who cancel their recurrent subscriptions over a given period of time. Why would...

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