How Do I Embed Custom Fonts in an Email?

September 2, 2019
Written by Jesús Diaz

How Do I Embed Custom Fonts in an Email

Custom fonts can look very stylish and provide a fresh feel to your emails. However, most email clients don’t support their use. This can be worked around with the use of a proper HTML code for your emails. It is very remarkable to notice that while most users benefit from a default web font, some do prefer the feel of a custom font.

Most of the email clients support the choice of available fonts in their settings or the options menu of an email. In some cases, you can directly use a command to import a new font and apply it to your emails. Note that the commands “@font-face” and “@import” are only available in Apple Mail and very few other clients.

Here we will teach you how to use the function of these commands in an HTML code. This will allow you to use imported and custom fonts in your emails. For this you might need to have a basic HTML knowledge. However, we will try to make this as easy to understand as possible.

How do I embed custom fonts in an email?

Let’s take this step by step.

  1. First, go to your HubSpot account, or create one if you don’t have one already, click on Marketing then Files and Templates and then on Design Tools.
  2. Using the finder click on the name of your coded template to make the editor open it. You can alternatively create a new template.
  3. Now, you want to copy the code below and then paste it into the <head> section of your HTML code. Remember this code template is the one you will use for your emails whenever you want to use a particular custom font. The pasted code should be between the <style> tags, it should replace the font-family and source URL with your font choice.

    “<style>
    @font-face {
    font-family: DeliciousRoman;
    src: url(https://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    }
    </style>”

  4. At last, you might want to reference the font in the body of your email. This can be place at the end of the main body of your email and it’s done with the following code:
    “<span style="font-family: DeliciousRoman;">Describe what you have to offer the customer.</span>”
  5. As a last step, complete any other edits or changes to your email template and just click on Publish Changes. With this, your emails using this template will use the custom font you’ve chosen with the first code. You can use this code in any email client that allows you to implement your own HTML code to your emails.

Notes.

While this process uses HubSpot as a crotch, you can use the HTML code generated in any email client on your own. To do this you simply have to switch the main writing function on your email client. This can be done in Outlook and Gmail platforms.

You can find a wide variety of web fonts to use in your emails in Google Fonts. Every font in the page is free to use and there are quite a few options to chose from. In case you want to know more places to get fonts you can try some of the following pages, these do charge money for their services however. MyFonts, Commercial, FontSpring, Typotheque, Village, FontShop and Process Type Foundry.

Also, be aware that some email clients do have a default type of font available for every email. Apple Mail uses Helvetica, Gmail uses Arial and Microsoft Outlook uses Calibri.

Lastly you should know that if you’re using Google Fonts the URL of the font may change in the future. In the event that this happens you can always chose a fallback font just in case the main one doesn’t work, this is an entirely different subject however.

Conclusion.

If you’re dealing with email marketing or just want to customize your emails, this is a quick method to do it. Having a custom font can help your readers feel more engaged with your emails just because they don’t look like most other emails. This means that you have enough confidence in your brand that you can take care of little details like fonts.

If you found this article helpful and want to know more about email marketing in general you find more of our articles by visiting our Blog.

What's New In Marketing

June 5, 2019
Email Verification: Everything You Need to Clean Email Lists.

Email verification tips and tools available resources and methods to clean your email list. Recomended Email Cleaning services for bulk email verification.

Read More
June 5, 2019
NeverBounce vs Email Hunter.

NeverBounce vs Email Hunter. Complete comparisons with sections such asaccuracy and support, infographics, diagrams and useful resources.

Read More
June 6, 2019
Email Hard Bounce and Solutions : 101 Guide to Email Bounces

Email bouncing article, tips, guides, definitions and online services. Complete with images, hyperlinks and a marketing study.

Read More
June 6, 2019
How to solve MailChimp’s Omnivore Warning issue.

How to solve MailChimp’s Omnivore Warning issue, If you use MailChimp, then its abuse program Omnivore makes things difficult we help delivery your emails.

Read More
June 6, 2019
Email Bounce Backs: Fixing Hard and Soft Email Bounces.

Fix email bounce backs, understand hard email bounce and soft email bounce as well as email verification and and email cleaning. Complete Email Bounce Back Guide.

Read More
June 10, 2019
How to Fix an Invalid Email Address: Best Guide 2019 [updated]

How to fix an invalid email address. Tips for email validation and reasons for an email bounce or an invalid email address. Find invalid email solution

Read More

Legal

Terms & conditionsPrivacy
© 2019 EmailVerify.co, All rights reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram