Marketing Cloud

Using Custom fonts to design email templates in SFMC

Salesforce Marketing Cloud is a very powerful tool, there are some limitations and restrictions to work around certain tasks that you can perform, and uploading font files into Content Builder/Web Studio is one of them.

Use Case:

A client has brand-specific guidelines for using specific fonts on the landing pages or in email messages. Marketing Cloud doesn’t have the same font support, although it is recommended to use “Websafe” fonts on emails as they render on all email clients but if the client has specific brand guidelines that mandate them to use the specific fonts we can follow this solution.

Solution:

Build a custom solution for these types of fonts to be used on the email messages or for the landing pages.

For those who are not familiar with the Online Salesforce Marketing Cloud UI, here is-

Step 1

  1. Convert the font file to a base64 and export it to a .txt file.

  2. In my case it is a .ttf font file.

  3. From a terminal window, execute the below command.

  4. Base64 myCustomFont.ttf > myCustomFont.txt

Step 2

  1. You have two options to create a custom font –
    • Content Builder –> Code Snippet.
    • Web Studio –> Landing Page or Cloudpage.
  2. Let’s go with Salesforce Marketing Cloud Content Builder option.

  3. Hover on the Content Builder tab.

  4. Click on Content Builder.

  5. Click on +Create content blocks and choose option code snippet.

  6. Copy over the content in the myCustomFont.txt into the textarea and save.

  7. Take note of the ID value as we will be using this in a later stage in the CloudPage.

  8. Content Block ID-

  9. Open the CloudPage and add the below code snippet according to where you want the custom font to be loaded.

    <html>
    <head>
    <meta charset="utf-8">
    <title>Custom Font CloudPage</title>
    <style>
    @font-face {
    font-family: "XyzCustomFamily";
    src: url(data:font/ttf;charset=utf-8;base64,%%=ContentBlockbyId("160535")=%%) format('truetype');
    font-weight: 400;
    font-style: normal;
    }
    body {
    background-color: bisque;
    }
    </style>
    </head>
    <body>
    <!-- Use the custom font-family -->
    <h1 style="font-family:'XyzCustomFamily',Arial;text-transform: capitalize;color: #1b0278;">This is my heading
    </h1>
    </body>
    </html>
    

     

  10. Also, you can use in your CSS <Style> tag this code-

    @font-face {
    font-family: "XyzCustomFamily";
    src: url(data:font/ttf;charset=utf-8; base64,%%=ContentBlockbyId("160535")=%%) format('truetype');
    font-weight: 400;
    font-style: normal;
    }

Leave a Reply