I want to use custom font SlatePro in my Microsite. I have 3 otf files for three different fonts. How do i achieve this.


I have noticed that sometimes the custom fonts which are externally linked gets blocked in sfmc cloud pages and microsites. There is a work around to this by Base64encoding the font file into css header or css file.

  • Basically you will have to Base64Encode the font file and put it in your css header up top in your microsite. Here is the link to the site.

    For Example:


  • Just below the AMPScript you will then reference your custom font.

    For example:

@font-face { font-family: 'YourCustomFontName'; src: url(data:font/opentype;base64,%%=v(@customFont)=%%); }

Note: Font type needs to be set within the font-family if you're Base64Encoding the same font type.

| improve this answer | |

You should check the license on your font to see if you're even allowed to use it in your page. While I have Base-64 encoded fonts before, it's much easier the license the font and embed the CDN version of it -- like Google Fonts.

| improve this answer | |
  • how do i check the licensing details in an OTF file. and how do i know if am allowed to use a specific font on my page? – kunal gidwani Nov 16 '17 at 23:03

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