Email Design Tips: How To Make Web Fonts Work Perfectly

Web fonts vs. web safe fonts

In email design, two primary types of fonts can be used: web fonts and web-safe fonts. Understanding the differences between these two can help you create more visually appealing and functional emails.

Web safe fonts

The web browser to pull the font from your local font directory, the pre-installed fonts on everyone’s computers. Web safe fonts are safe to use because there’s a strong chance your subscribers will already have them.

Some well-known web safe fonts include:

• Arial
• Helvetica
• Verdana
• Georgia
• Times New Roman
• Tahoma

Web fonts

Your email code declares font using a CSS property called font-family. The fonts then, are pulled from your host server or an external one (such as Google or Adobe).
Sometimes, your subscriber may already have a web font downloaded and installed on their machine, so these fonts will work even in email clients that don’t support web fonts!

Email client that support Web font:

How to embed web fonts in emails

There are three methods for embedding web fonts in email:

• <link>
• @import
• @font-face

1. Importing a web font using <link>:

<link rel="noopener" target="_blank" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

2. Importing a web font using @import:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

3. Importing a web font using @font-face: ( insert @font-face between your <style> tags)

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
}

Use your fonts in email

Once you’ve embed your web font, Just use the font-family name defined in the import method followed by your fallback font(s) in either the CSS inline or in the head:

font-family: 'Roboto', Verdana, sans-serif;

'font-name' is to specifies the preferred fonts for the email client.