Has anyone figured out a way to use custom fonts in Marketing Cloud emails, where the font is specified only with Free Form content block level?

There is a hacky solution provided for full HTML emails in this question, but this method doesn't seem to work or I'm doing something wrong.

First encode font file on Base64Encode site.

Then create codesnippet with the code:


Then add the @fontface to the block

@font-face {   
           font-family: CustomFont;   
           src: url(data:font/ttf;charset=utf-8,base64,%%=v(@customFont)=%%) format('truetype'); 

Then style the areas with simple

div {
     font-family: CustomFont;

However even just adding the @font-face to the Free Form will disappear after saving it.

Anyone else have had any luck using custom fonts with emails HTML?

  • You are putting the @font-face inside of a style tag, right? Are you putting the style tag into a block without any other content? Any more details you can provide would be great. Nov 9, 2018 at 14:07

2 Answers 2


I don't know if this will help you, but what we do in my company is:

We uploaded the css of the custom font we're using to an FTP, and we're pulling it as you'd have in a web page, like this;

<link rel="stylesheet" type="text/css" href="URL_OF_YOUR_CSS" media="screen" />

The css file we've uploaded is base 64 encoded. It's something like this;

@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: "CUSTOM_FONT";
  src: url(data:application/x-font-woff;charset=utf-8;base64,[ENCODED_TEXT])

Since you have to use inline css for emails, in all our HTML templates the font-family is pre-written with a fallback (you need a fallback because calling an external css won't work in many email clients such as Outlook).

If someone has a better solution for this, I'm happy to improve the way we do it.

  • That's an interesting workaround, I'll give it a try. Does it work with OTF font format? Inside that CSS file you have the base64 encoded text of the font file I assume?
    – Rain
    Oct 17, 2018 at 9:01
  • @font-face is the highest recommended method for webfont in email. Link runs into potential issues with load time. See here for some good insights into webfont in email: litmus.com/blog/the-ultimate-guide-to-web-fonts Nov 9, 2018 at 14:11
  • @Rain, yes we have a base64 encoded text of the font in the css file. I'm updating the answer with that. We've never encountered any issues with the load time using this method. However, if you come up with a solution that has a faster load time, please let me know.
    – firko
    Nov 13, 2018 at 14:11

Adding a base64 String can be quite heavy for the CloudPage and specially when you're interacting directly on the HTML code back and forth, I would add the following code that has the same functionality but it's more clean in my opinion, as an example:

      @font-face {
      font-display: swap;
      font-family: "WuW-RegularWeb";
      src: url(data:font/ttf;base64,%%=ContentBlockbyId("993476")=%%) format('truetype');
      font-weight: 400;
      font-style: normal;


The contentBlockbyId will point to a Content Builder Code Snippet and will have inserted the base64 encoded data.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .