How to Use Google Fonts in Email

How to Use Google Fonts in Email?

August 6, 2021

Are you fed up with your ordinary email font? We will guide you to add Google fonts in Email.

No doubt, Times New Roman or Arial font makes your email pretty good, but what if you want to add a little flavor to it?

Lately, web fonts are increasingly popular in email, and there is a reason for it.

Email engagement doesn’t only depend on what is written in it but also on presentation skills. Email marketers use attractive web fonts that best fit the message of the email. It’s because a specific yet eye-catching web font can play a substantial role in building up a brand’s identity. A good web font hooks the reader to read and explore what you have to offer in the email.

There are many web font options available online, such as Google Fonts, Adobe Type kit, MyFonts, Commercial Type, Fontspring, FontShop, etc.

Since Google fonts are easier to get and have a myriad of beautiful fonts, many brands rely on Google fonts as a creative solution for their email campaigns.

If you are also going to use Google fonts in your email, have a look at things that you should know before considering Google fonts in your email campaigns:

Web Fonts or Web Safe Fonts

Let’s first understand the difference between web fonts and web safe fonts.

Web Safe Fonts are actually the default fonts that work across many systems and devices. Web safe fonts include Arial, Times New Roman, Verdana, Georgia, Helvetica, etc.

On the other hand, web fonts are unlikely to be found on every operating system and device. However, they are supported by certain notable email clients.

The major email clients that support Google fonts are:

  • Apple Mail 
  • Microsoft Outlook (most versions)
  • Lotus Notes
  • Thunderbird
  • Android (default mail client, not Gmail app)
  • iOS Mail (default email browser on iOS)

Unfortunately, Gmail is not on the list to support Google fonts.

Google Fonts Support

Web fonts including Google fonts are not universally accepted in every email client. Due to excellent browser support, web fonts work fine for web pages but not for every email client.

As a result, if the device or system doesn’t support web fonts, the email will fall back to the default font style that can drastically affect your email format.

Here is an overview of email clients and their web font support:

 

Email client Web Font Support
Outlook.com No
Outlook 2007-2016 No
Outlook 2019 No
Outlook for Mac  Yes
Outlook Office 365   No
Outlook App   No
Gmail   No
Gmail App   No
iOS  Yes
Apple Mail  Yes
Samsung Mail   No
AOL Mail   No
Office 365   No
Yahoo! Mail  No

How to Embed Google Fonts in Email?

To use Google web fonts for HTML OR CSS email, you just need to follow the simple steps below.

So, let’s get started:

Visit www.google.com/fonts to browse and choose your favorite Google fonts. After selecting the font, you can add it to your email via three methods i-e

  1. <link> Method
  2. @import Method
  3. @Font-face method

Let’s have a look at each method:

1. <link> Method

It is the preferred method as it produces consistent results and loads the fonts in parallel with email. As a result, fonts are shown sooner.

You just have to add the <link> tag in the <head> of your email. You can also add the <link> tag in the <body>.

Here is a sample code snippet:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

2. @import Method

The @import method also works well but not as fast as the <link> method. You have to wait until the entire email is loaded, and then Google font loads at last.

Here is a sample code snippet:

<style>
@import ulr('https://fonts.googleapis.com/css?family=Roboto');
</style>

3. @Font-face Method

@Font-face method is a direct-to-the-source method to import web fonts. This method is more reliable because you choose the format of the web font which you want to import.

The best format for the fonts is .woff, which is widely supported for email. To get this type of code, you need to follow the given steps

  1. Go to www.google.com/fonts and select the preferred font
  2. Copy the font URL and past it in Safari or Internet Explorer
  3. Now, you will see a @font-face declaration that you have to copy and paste in the <style> section

Here is a sample code snippet:

@Font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular), URL(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxM.woff) format ('woff');
}

Always Add a Fall Back Font

Another important thing to remember is to provide a web-safe fallback font. If the recipient uses an email client that does not support Google fonts, the message will then be shown in the fallback font.

For example, if you are using Google fonts, some versions of Outlook may not support the font and show the email in default Times New Roman font.

So, if you used a Google font for the entire template, force the outlook to use your fallback font on the entire template by embedding the given code after the <body> tag in the email template. The code looks like this:

<!--[if gte mso 9]>
<style type="text/css">
   body, table, th, td, span, ol, ul, li {font-family: Verdana, sans-serif !important;
}
</style>
<![endif]-->

If you use a Google font only in certain parts of the template, target them individually by creating and applying a class to anywhere in the template. Code for outlook with class named “fallback-font” looks like this:

<!--[if gte mso 9]>
<style type="text/css">
   .fallback-font {font-family: Verdana, sans-serif !important;
}
</style>
<![endif]-->

Google Fonts in Email Signature

If the email recipient uses an email client that doesn’t support web fonts, it will strip the head of your HTML email signature. Unless the recipient has the exact font installed in his PC or Mac, the email signature would not appear in the same format and design.

Therefore, even if the email client supports the email signature web font, we wouldn’t suggest using them because there is always the risk of changing email signature formatting.

Use YourEmailSiganture for Personalized Email Signature 

After putting significant effort into your email fonts, why are you leaving the ending barren?

An impressive and professional email signature is one of the pillars of successful email campaigns. With Hatima, an online signature creator by YourEmailSiganture, you can create impressive email signatures using web safe fonts.

Here, the process of creating an email signature is quite simple. You just have to add contact details, a logo or image, and links to your portfolio or website to get a professional email signature. Email signatures created by Hatima will be displayed in the format and design that you chose as your signature.

Moreover, it provides the following email signature features

  • Email signature shareability anywhere on the web
  • Multiple template options to choose from
  • User-friendly interface
  • Multi-language support
  • Unlimited revision for perfect email signature

Sum Up

Lighten up your email campaigns using web fonts, especially Google fonts. These web fonts are a great way to make your emails stand out among several other newsletters.

Also, bring the things to an extra level by adding an email signature using YourEmailSiganture. We are just a click away to create a unique yet impressive email signature.

Related articles

How to add an image in email signature in Gmail

How to Insert An Image in Email Signature in Gmail

We all live in an age where presentation matters the most. No matter what your business field is, powerful communication is the hallmark of every marketing campaign to

How To Design an Email Signature

How To Design an Email Signature

Whether you are writing an email for an internship, a job, or even a business meeting, a professional email signature at the end can leave a solid impression.

How to End a Business Email

How to End a Business Email

Often we have heard that a first impression is the last impression. Sounds true, but when you are writing a business email, the facts are altered. And since

Create Your Email Signature

In less than 60 seconds. Works with Gmail, Outlook, Apple Mail, Yahoo, and many more!