Use custom fonts in Customer Insights for emails and forms

Using a custom font in Customer Insights Journey is a great way to create a unique visual style and brand identity that stands out from the crowd. Microsoft has recently added the ability to add custom fonts to emails and forms alongside the standard fonts. Adding them is easy, but there are a few things to consider. Fonts in emails in particular can present some pitfalls. In this article, I’ll show you what custom fonts are, what to look out for and how we can use them in Customer Insights Journey .

How do fonts work?

Your email code specifies the font using a CSS property called font-family. This font-family property can contain either just one font name or multiple font names, often referred to as a font stack. Including multiple font names ensures that a backup font of your choice is used if a custom font is unavailable. Otherwise, the email client will decide on your backup font. The standard version of Customer Insights Emails uses so-called Web Safe Fonts that look like this in CSS:

 <style>
        body {
            font-family: Arial, Verdana, sans-serif;
            font-size: 14px;
            color: rgb(0, 0, 0);
            background-color: rgb(255, 255, 255);
        }
</style>

But what makes a custom font?

What is the difference between Web Safe Fonts and Web Fonts?

To do this, you first need to understand the difference between Web Safe Fonts and Web Fonts. Although the name is similar, there is a big difference behind it.

Web Safe Fonts:

• Web-safe fonts are fonts that are available on most operating systems and devices.
• They are considered “safe” because they are likely to be installed on the user’s computer and ensure a consistent display even if the specified font is not available.
• Common web-safe fonts include Arial, Helvetica, Times New Roman, Georgia, Courier New and Verdana.
• The use of web-safe fonts can help to ensure a uniform appearance on different platforms.

Web Fonts:

• Web fonts, on the other hand, use customised fonts that are not pre-installed on users’ devices.
• They allow designers to use a wider range of fonts and offer more creative freedom and unique designs.
• Web fonts are loaded from external sources, often via services such as Google Fonts or Adobe Fonts, and downloaded to the user’s device when they visit a website.
• Higher risk that the font will not load properly. A fallback font from Web Safe Fonts is therefore important.

As web font support is inconsistent across different email clients, it is advisable to analyse where your subscribers usually open their emails. If the majority of your subscribers use an email client that supports web fonts, give it a try. If you find that your audience mainly uses an email client without web font support, you can save time and effort. And unfortunately, the list of clients that support web fonts for email is very small: Find an overview here (Link).

What else is important with custom fonts?

If you want to use custom fonts, there are a few more things you should think about beforehand:

1. Licences: There are different providers of web fonts. Google, for example, is free of charge (Link), whereas Adobe includes some fonts in the Creative Cloud Subscription (Link).
2. Accessibility: Find a font that fits your brand well and is still legible and accessible. Decorative or curved fonts, for example, cannot be read well by people with dyslexia or visual impairments.

Insert custom fonts in Customer Insights

I use a font family (Link) by Google. I download these from the Google Fonts page and receive a zip file, which I then unzip. The folder contains many .ttf files that define the font, e.g. how it looks in bold, normal or italics.

In addition to ttf, there are also other formats such as .eot, .woff, .woff2 and .svg. The .woff and .woff2 formats are the most compatible with emails. Microsoft therefore recommends using one or both of these formats for emails if possible.

Set custom fonts in Customer Insights brand profile

When you upload the new font, select only the ttf files you need.

It is then also possible to specify the font and add the weight and style to it. This is not a must, but automatically adds the details in the name of the font.

Use custom font in Customer Insights emails and forms

Now I can also select the font in emails and forms.

I can select my brand profile in emails and then see my new fonts in the Designer. As soon as I add a text to an email, I now have the option of using my own fonts in addition to the standard fonts in the toolbar.

As described above, only very few email clients can also load web fonts. If you still want to use some, make sure that you define a fallback font (Web Safe Font) in the HTML.

This is a little easier in forms, even if there are no brand profiles. In the Designer tab, however, the custom fonts are added in the same way as in the brand profile. There I also define the font globally for all field names and placeholders, otherwise I would have to do it manually for each field on the form.

Define fallback for custom font

New @font-face classes with the custom fonts are automatically part of the CSS of the email. This also contains a font-display: swap specification. The swap value instructs the browser to use the fallback font to display the text until the custom font is fully downloaded.

To ensure that the email client selects the correct fallback font, I adjust the CSS. To do this, I add the name of the custom font to the font-family settings of the individual classes in the

The CSS in the email HTML then looks like this (I have shortened it a little):

<style>
@font-face {
      font-family: AsapCondensed-Black;
      font-weight: 900;
      font-display: swap;
      src: url(https://assets-usa.mkt.dynamics.com/... );
        }
@font-face {
      font-family: AsapCondensed-Regular;
      font-weight: 400;
      font-style: italic;
      font-display: swap;
      src: url(https://assets-usa.mkt.dynamics.com/... );
        }
...

body {
     font-family: AsapCondensed-Regular, Arial, Verdana, sans-serif;
     font-size: 14px;
     color: rgb(0, 0, 0);
     background-color: rgb(255, 255, 255);
        }

a {
     font-family: AsapCondensed-Regular, Arial, Verdana, sans-serif;
     font-size: 14px;
     font-weight: normal;
     color: rgb(0, 130, 221);
     text-decoration: none;
        }
h1 {
     color: rgb(0, 0, 0);
     font-size: 34px;
     font-weight: normal;
     font-family: AsapCondensed-Black,Arial, Verdana, sans-serif;
     text-align: left;
        }
...

p {
     font-family: AsapCondensed-Regular, Arial, Verdana, sans-serif;
     font-size: 14px;
     color: rgb(0, 0, 0);
     font-weight: normal;
     text-align: left;
        }
</style>

I can only recommend that you maintain the text styles in the email and in the form or store them in a brand profile. This makes creation so much easier, the texts has a defined standard and the fallback CSS also works properly. I have tested it with Outlook and Gmail on desktop and mobile.

Summary

Web fonts are a great way to make the text in your emails and forms both brand-specific and accessible. However, as you can see from this article, there are many subtleties to consider. First and foremost, think about licences and accessibility if you want to use a custom font in Customer Insights for emails and forms. And unfortunately web fonts are rarely available in email clients, but for forms in browsers it’s a different matter. Since the customer experience and recognisability should be consistent, I recommend the use of web safe fonts, especially in B2B. The most commonly used email client is Outlook and anyone who works a lot with emails knows that Outlook reacts to HTML interestingly. That’s why the most important thing is:

Always! Test it!

Nevertheless: I find the function for a custom font in Customer Insights easy to use and it makes the world of forms and emails a bit nicer.

***Please be aware: The content is accurate at the time of creation. It may be that Microsoft has made changes in the meantime.***

Check out the FAQ section of my blog as well: Short questions with quick answers! Go to FAQs