What you need to know about Email fonts

It's well known that fonts in email can cause trouble. You can use any font you like on your website, but when email clients get in the picture things start to get a bit difficult. Why is that? Well, today we'll dig in a little deeper and explain all the details of why is this such a problem. 

Let's start with system fonts. 

The system fonts are the fonts that are already installed on your computer, and every email client can use them, so this is why these fonts are so-called 'email safe fonts.' But times are chaining and it appears that more and more email clients start to support web fonts. This brings me to one of the most email famous topics, and that is web vs. web-safe fonts.

Web font vs. websafe font

Fonts such as Arial, Verdana, Georgia, Times New Roman, and Courier are web-safe fonts, and you are probably using some of them in your email. They are so-called safe fonts because they are default fonts and can be found on every device, and you can always count on them working no matter what. 

On the other hand, web fonts emerged when people got bored of the same old fonts so they designed new fonts, that are licensed and can be used on websites. And everyone was happy because the fonts were now more ecstatically pleasing and you are not limited when choosing a font. And of course, you can find these fonts most famously from Google fonts.

Using web fonts in email

You can use web fonts in your email but you'll need a license to use them online. Now, licensing a web font for email is not really a famous topic. Because using a web font in email is known as redistributing the font, so you'll need to carefully read the EULA (End User License Agreement). Even if you get a web font for your email you can't be sure if your customers can really see them. Because we have a lot of email clients nowadays and not every email client has good support for web fonts. Plus you'll need to know how to embed a web font in your email, that is also important when it comes to displaying the web font by an email client because it's also checking the way that the font is embedded. 

Furthermore, you'll need to be careful when choosing the right fallback font. The fallback font is displayed when the email client doesn't support web fonts. So it's recommended as a fallback font to use some of the web-safe fonts, so the email client can be able to support it, and display it. 

One other thing to be careful about is the file size of web fonts. Web fonts have different file sizes just like image files, and they need to be loaded in your email. I'm saying to be careful because if the font takes time to load then this could affect your customers. 

So can I use web fonts now?

You can. If you decide to use web-fonts you can use the Google Web Fonts library or Host your fonts. Here in our brand styles article, we explain how to do both.

In Loopify, is quite easy, just enter the Settings app from the dashboard and choose Brand styles, the fonts can be searched from the list of Google fonts and Websafe fonts. 

If you host your web fonts use the @font-face approach. 

@font-face {
 font-family: 'My Font';
 font-style: normal;
 font-weight: normal;
 src: url(https://myserver.com/example.woff2) format('woff2');
}

To add the custom font in Loopify simply copy/paste the CSS file link from the @font-face rule, and make sure it's an HTTPS link! From the brand styles window, you can also choose the Fallback font that is a list of web-safe fonts. 

Now, even if you are hosting the web fonts there are some font formats (EOT, SVG, TTF, WOFF, WOFF2, WOFF base64 encoded, and WOFF2 base64 encoded) that are still not supported by many email clients. 

Here is a list of supported font formats:

But as I mentioned before using web fonts has its challenges because not all email clients support web fonts. Here are some emails clients that support web fonts: 

• Apple Mail
• iOS Mail
• Google Android
• Samsung Mail (Android 8.0)
• Outlook for Mac
• Outlook App 

Lastly, here's an example of how a normal font should look:
https://fonts.loopify.com/LOOPIFY/css/Roboto.css
and a more advanced, modified version:
https://fonts.loopify.com/LOOPIFY/css/Roboto-Bold-500.css

To wrap up, choosing the right font is important but email has its limitations, and it is a challenging task. But as an advice, I'll just say see what your clients most often use and is it okay to go through the whole process if they mostly use an email client that doesn't support web fonts.