5

I'm facing some issues with the upload of a custom font on Marketing Cloud. My clients purchased this new custom font and they would use it in cloud pages and email. I have only the css file and the font file (eot, tff, woff extensions). How can I use them? Anyone could help? Thanks in advance, Alessia

6

I was able to get the method from @brad to work, but with a few tweaks.

First, as mentioned by @MarkP, there's no need for the %%=v(@DecodeFont)=%%);.

Second, I wasn't able to get the base64 encoding from that site to work, despite changing the options and trying multiple things. However, I'm on a mac, so I just used the terminal to encode the font and it worked perfectly. (example: $ base64 myfont.ttf > myfont64.txt)

Lastly, I had to remove the utf-8, from the src string, because it wouldn't work otherwise.

For full context, here is what I ended up with:

AMPscript:

%%[
  SET @customFont = "BlahBlahBase64String"
]%%

CSS:

@font-face {
  font-family: "BestFontEver";
  src: url(data:font/ttf;base64,%%=v(@customFont)=%%) format('truetype');
  font-weight: normal;
  font-style: normal;
}

Cheers!

3

Custom fonts are currently not supported in most popular email clients. It is best practice to use a default font to ensure a consistent experience for your readers.

With regards to the cloud pages there is no real way to host font files in Salesforce Marketing Cloud.

However I have tried this in past and it seems to work. Basically you will have to Base64Encode the font file and put it in your css file. Here is the link to the site.

For example:

%%[
SET @customFont = "AAEAAAAQAQAABAAATFRTSFYQNIsAAAWAAAAA6k9TLzKDu5zQAAABiAAAAGBWRE1YarRyOgAABmwA
AAXgY21hcAx2xBwAACE...."
]%%

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

Here is an example:

@font-face {
    font-family: 'YourCustomFontName';
    src: url(data:font/ttf;charset=utf-8,base64,%%=v(@customFont)=%%) format('truetype');%%=v(@DecodeFont)=%%); /*AMPScript variable to link your decoded font.*/
}
  • 1
    Can you explain if the DecodeFont AmpScript variable in your example is needed? If so, where is that variable being set? – Mark P Sep 14 '18 at 20:16
3

First of all, thanks for solutions from Brad and Tim.

I made it to work after "combining" their solutions.

  • First I encoded my font file with UTF-8 charset.
  • Then I followed Tim's CSS example but added "charset=utf-8" in url param

CSS:

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

One thing special is I removed the single quotation for the font-family name, and I applied it on my div block.

div {
     font-family: BestFontEver;
}

Hope it works.

0

After battling with this for a while, I also had to make some minor tweaks to get a custom font to work. My src string looked like the following:

src: url(data:application/font-ttf;charset=utf-8;base64,%%=v(@FontName)=%%) format('truetype');

So the start of my Cloud Page HTML looks like:

<html>
    <head>
        %%[SET @customFont ="BASE64ENCODEDSTRINGHERE"]%%
        <style class="main_style">
            @font-face
            {   
                font-family: customFontName;   
                src: url(data:application/font-ttf;charset=utf-8;base64,%%=v(@customFont)=%%) format('truetype');
            }

            body
            {
                font-family: customFontName;
            }
        </style>
...
New contributor
Will. D is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

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.