How Do I Embed Custom Fonts in an Email?

September 2, 2019
Written by verifybee

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.

envelope-ophoneinstagramgraduation-hatstorephone-handsetchart-barseartharrow-right