Can I Add Google Fonts to My E mail Designs?

So that you’ve written superb copy in your subsequent e-mail advertising marketing campaign. However your e-mail nonetheless appears to be like a bit boring.

How about some enjoyable fonts to jazz up that e-mail? On this article, we’ll discuss net fonts and the way to use them in your HTML e-mail designs.

What are net fonts?

Internet fonts are fonts pulled from a server hosted by you or by an internet font service, similar to Google (Google Fonts). This offers you entry to a a lot wider number of fonts than the few that come pre-installed on all units. Consider the design prospects this opens! 

Nonetheless, as we’ll talk about beneath, not all net fonts are supported by totally different e-mail purchasers or net browsers. When that occurs, your funky font selection would possibly look funky for a unique motive.

Don’t fear, we’ll clarify how font stacks in HTML emails provide help to preserve some management over which fonts e-mail purchasers show.

What’s the distinction between net fonts and web-safe fonts?

Once more, there are a selection of fonts that come pre-installed on virtually each system. These fonts are thought of “web-safe,” since they’re pulled out of your consumer’s native listing, and there’s probability that web-safe fonts will show.

The one caveat is there’s a shortlist of web-safe fonts, and these fonts could be a bit boring when you’re making an attempt to match your model’s chosen typeface or make your e-mail design stand out from the group. Right here’s a checklist of some net protected fonts:

• Helvetica
• Verdana
• Sans Serif
• Georgia
• Instances New Roman
• Arial 
• American Typewriter

In distinction to web-safe fonts, net fonts are pulled from a server. This implies they’re not hosted in your consumer’s native machine, and there’s probability the font isn’t put in in your consumer’s native listing. In different phrases, there’s an opportunity the online font might not show as supposed as a consequence of variations in net browsers and e-mail purchasers.

How can net fonts enhance my emails?

Though it takes a couple of additional steps to make use of net fonts, they will enhance your e-mail marketing campaign design. A number of the explanation why you’d need to use net fonts as an alternative of web-safe fonts are:

• You’ll have extra artistic freedom. Internet-safe fonts could be a bit limiting when it comes to e-mail design. With net fonts, you’ll have entry to much more fonts which might add that additional edge to your e-mail marketing campaign.
• You’ll stand out from the group. The inbox is a crowded place. Preserve your reader’s consideration as soon as they open your emails with strategic use of artistic fonts.
• You’ll develop a powerful visible model identification – with out having to make use of pictures. Many well-known manufacturers use very recognizable fonts. While you see it, it reminds you of the model, even when it isn’t brand-name. You should utilize net fonts to constantly develop your personal visible model identification with out having to resort to pictures.

The commonest motive for utilizing a particular net font in e-mail advertising is {that a} model desires to make use of a particular font for which they’re already acknowledged. E mail builders could also be requested to incorporate a sure customized font as a result of it’s the one recognized to be used for headlines and duplicate in different digital belongings.

However then … somebody within the firm sees an e-mail in Outlook and wonders why you’re utilizing Instances New Roman. That’s the issue we’ll handle later on this article.

What are some issues to contemplate earlier than utilizing net fonts?

Earlier than we dive into the way to get the appropriate fonts to show in your e-mail campaigns, we should always take into account a couple of issues:

• E mail consumer assist
• Readability and accessibility
• Licensing

Let’s dig into every of those in additional element beneath.

Which e-mail purchasers assist net fonts?

Whereas many e-mail purchasers assist net fonts, not all of them do. In truth, there could also be variations between emails opened in net browsers and in e-mail purchasers. As all the time, you should definitely take a look at your emails to make sure your content material shows as supposed.

E mail purchasers that do assist net fonts embrace:

• Apple Mail
• iOS Mail
• Android Mail (not Gmail)
• Thunderbird
• Outlook for macOS

So, you’ll have the very best luck with net fonts in case your subscribers are utilizing Apple units.

Why do I want to concentrate on net font readability and accessibility?

Though net fonts will let you be artistic with font types and branding, remember that not all fonts are equally readable. That’s, some fonts are simpler to learn than others, like sans serif fonts. Ornate or ornamental fonts could make it exhausting for low-vision readers to differentiate between letter shapes.

Check out the Johto font that mimics previous online game interfaces:

Fairly cool, proper? However perhaps save the Johto font in your subsequent video game-inspired app. This won’t be as readable within the physique copy of your advertising emails.

Preserve your fonts accessible to all of your readers by utilizing easy-to-read fonts which might be extensively supported in main e-mail purchasers.

Do I have to license net fonts?

You’ll want a license to legally use an internet font on-line. Many net font providers have Finish Person License Agreements (EULA) protecting web site and cell app utilization. Nonetheless, you could have to achieve out to particular person net font suppliers to see if they permit their fonts for use in emails. Some suppliers see e-mail utilization as a method of redistributing the font, which matches towards their insurance policies.

The place can I discover net fonts?

Able to get began with net fonts? We’ve put collectively an inventory of the place you could find net fonts in your subsequent advertising marketing campaign:

• Google Fonts (free)
• Adobe Fonts (principally free)
• Internet font providers (paid)

Let’s check out every of those in additional element beneath.

Google Fonts

Google Fonts is a free net font service. You’ll be able to embed the fonts through an URL or obtain the online fonts when you’re mocking up designs in your native machine with Adobe Photoshop, Sketch, or one other design software program. Google Font licenses will let you use them in your emails. Under, we’ll speak extra about how one can embed Google Fonts in your e-mail with the <hyperlink> technique.

It’s vital to say that, for no matter motive, most Google fonts (and different net fonts) received’t show in Gmail. Appears unusual, proper? It’s what it’s, pals.

Adobe Fonts

Adobe Fonts is a paid net font service. Nonetheless, it’s free when you’ve already obtained a Artistic Cloud subscription. Adobe Font licenses cowl e-mail utilization. We’ll talk about beneath how you should utilize each the <hyperlink> and the @import strategies to make use of Adobe Fonts in your emails.

Internet font providers

There are a variety of net font providers which might be out there on a paid foundation. As we talked about above, all net fonts require licenses. Examine with every supplier to verify you should utilize their fonts in your emails.

Right here’s an inventory of some paid net font providers:

How do I embed net fonts in emails?

Now that we all know the place to search out net fonts, let’s discuss three other ways to embed net fonts in your HTML e-mail template:

We’ll dig into every of those beneath and why you would possibly need to select every technique. Within the following sections, we’ll discuss utilizing net fonts in your emails and the way to use a font stack to specify fallback fonts in case your net font doesn’t show in a selected e-mail consumer. That is vital as a result of net fonts solely work in a restricted variety of e-mail purchasers.

Earlier than we get began, you ought to be acquainted with HTML and CSS ideas. (Try our e-mail coding refresher when you’re a bit rusty!) In these examples, we’ll use the Roboto font from Google Fonts. Nonetheless, the method must be comparable for all different net fonts.

How can I take advantage of the @import technique to embed an internet font?

The @import technique defers the loading of the online font till your e-mail’s HTML is absolutely loaded. In different phrases, your e-mail will load first, after which your font will load after. This implies your font might take a bit longer to seem. Right here’s what e-mail consumer assist loos like for the @import technique:

To make use of the @import technique, we’ll first receive the @import code from the online font service. Then, we’ll embed the tactic within the head of our HTML e-mail template.

We’ll use Google Fonts for this instance, however the process is comparable for different net font providers. To make use of the @import technique:

1. Navigate to your font on Google Fonts.
2. Subsequent to your font, click on +Choose this type.
3. Within the sidebar which pops up, click on the radio button for @import, as proven beneath.
   
4. Choose and duplicate the code.
5. Paste this code, together with the <type> tags, within the <head> of your HTML template.

How can I take advantage of the <hyperlink> technique to embed an internet font?

The <hyperlink> technique masses your net font inline as your e-mail’s HTML code is learn from prime to backside. In different phrases, your e-mail would possibly take longer to load in case your net font file could be very massive. Right here’s a take a look at e-mail consumer assist for utilizing the <hyperlink> HTML ingredient: