Custom Fonts In Emails? Use this!

I have been aware of the challenges with web fonts in emails for quite a while. Recent work required using custom fonts in email campaigns even though they will only partially work. So I started to look into this issue.

There is a limitation to which applications and services will render the fonts. You can see more detailed article at Litmus.

This is the code that worked in Mozilla Thunderbird:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="https://db.onlinewebfonts.com/c/5ce66afbbd1516da0d69cffddf4f8cf3?family=Corbert" rel="stylesheet" type="text/css" />

<style type="text/css">

@font-face {
  font-family: 'Corbert';
  src: local("Corbert"), url(https://db.onlinewebfonts.com/t/5ce66afbbd1516da0d69cffddf4f8cf3.woff) format('woff');
}

p
{
  font-family: "Corbert",Verdana, Geneva, sans-serif !important;  
}

</style>

I have also tested using this in Mailchimp email builder. You can embed this code into topmost part of the email and it will render fonts as long as you use !important rule.

Don’t forget to have the fonts gracefully degrade to second choice (in this case I used Verdana).

Leave a Reply