How Do I Embed Custom Fonts in an Email?

September 2, 2019
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.

September 15, 2022
How to Avoid Spam Traps and Protect Your Sender Reputation in 2022

Building an email list from scratch takes a lot of effort and time. Nothing is more frustrating than discovering that spam traps have infiltrated your email address. It is not unusual for spam traps to occur even if you follow email best practices. But if you communicate with your subscribers with the best intentions, care […]

Read More
July 1, 2022
How To Ping An Email Address To Validate It

Do you ever wonder whether an email address is a legitimate or a false email address when it bounces back? Probably the easiest method to handle this is to ping an email address, and in this article, we will demonstrate how to ping and validate an email address. Validating emails by pinging different addresses is […]

Read More
June 29, 2022
The Best Email Services To Not Ask for Phone Verification

With everything becoming tech-based around us, it only makes sense that we turn to the internet for required services and needs. However, that is also when we truly feel the importance of "Emails." Today, an email account is the one thing that can help you sign up for any service or platform. It is one […]

Read More
May 16, 2022
How Email Verification Works: The Ultimate Guide

Following the creation of your email lead list, email verification is one of the most critical phases in any email marketing campaign. If you don't verify your emails - all the hard work you put into your email marketing campaign essentially becomes worthless. Now you, along with many others, might be scared of your email […]

Read More
envelope-ophoneinstagramgraduation-hatstorephone-handsetchart-barseartharrow-right