Custom font in Email content blocks

Question

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:

%%[
SET @customFont = "T1RUTwAMAMKAAAMAQENGRiDCu2zDikEAAgTCuAAAwoITR1BPUzA.."
]%%

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?

Answer 1

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.

Answer 2

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.