Yes! While not all email clients have universal support for webfonts, several of the most popular email clients do. According to our friends at Litmus, the following list of email clients offer support for webfonts in 2020:
- Apple Mail
- iOS Mail
- Google Android
- Samsung Mail (Android 8.0)
- Outlook for Mac
- Outlook App
Webfonts can be embedded in your emails after adding a reference to where your webfont is hosted or by adding the proper CSS into the style element. We will be using Google Fonts in our examples below.
The first method is to reference the hosted webfont using the
@import CSS rule.
Alternatively, you can also reference the hosted webfont using the
link HTML tag.
The last method is to use the
font-face CSS rule. There are several format types available that webfonts are stored in:
.woff2. You will want to select either
.woff2 as they have the most support across email clients.
To obtain the full CSS, visit the reference URL: https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900
Once you have the CSS, you can add it to the head element within a style tag.
@media screen rule wrapped around the
@font-face declaration are a workaround to help the webfonts render in some Outlook email clients.
Given the three options, which method should I use?
<link> methods work similarly and are well supported across many email clients. The important distinction between the two would be the
@import rule will load the font as your email is being displayed, which can result in your email displaying the websafe font for a brief period during the loading time.
On the other hand,
<link> will only display the font after the HTML has finished loading. This will only become an issue for larger email templates where the load time might be slightly higher. In many cases, either methods will work great.
@font-face method is known to be the “bulletproof” method since you are adding the direct source of the fonts to your email. One thing to consider with this method is if your team is using an external online webfont, the URL can be changed in the future. This doesn’t happen frequently, but it can happen— so make sure you test your emails regularly.
Once you have imported your webfont, you can now use the
font-family CSS property with the value of your webfont.
For example, you can create a CSS class and use it on a text element. Note that Sendwithus will automatically inline your CSS!
Alternatively, you can directly insert styling within your HTML element.
Supplying a Websafe Font
Since not all email clients support webfonts, it’s important to include a good websafe font as a fallback. Websafe fonts are considered “safe” fonts because they are typically pre-installed as the default font sets on the user’s operating system or device. Some of the popular websafe fonts include:
- Times New Roman
- Courier New
The best practice for selecting a websafe font is to select one that closely matches your team’s branding.
You’ll notice in some of the code examples, the
font-family CSS property is listing a couple font options.
The order of precendence for the fallback fonts are written from left to right. Given this example, the font precedence will be:
Lato > Arial > San Serif.