2

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?

  • 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. – Gortonington Nov 9 '18 at 14:07
3
+50

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 '18 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 – Gortonington Nov 9 '18 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 '18 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.