Adding custom fonts to Salesforce CloudPage
In this article, we are going to take a look at a different topic... Salesforce!
It is a customer relationship management service platform used widely around the world.
Although SF is a very powerful tool, there are some limitations and restrictions around certain tasks you can perform, and uploading font files into Content Builder is one of them.
For those who are not familiar with the Online SF UI, here is a glimpse.
The number of available apps may vary depending on your account.
Let’s jump right into the topic and see how we can add a custom font in to a Salesforce Cloud Page.
Even before we begin you may wonder why can’t we just host the font file somewhere and provide the URL under src of a @font-face CSS style ?
Answer is…..Not a problem, you can do that !
But, this article is for situations where you want all the assets to be hosted at a central location. i.e Content Builder.
If you try to add any font files with formats such as .ttf .woff etc you will get an error message from SF,
So how can we get around this ?
Step 1
Convert the font file to a base64 and export it to a .txt file.
In my case it is a .ttf font file.
From a terminal window, execute the below command.
base64 myCustomFont.ttf > myCustomFont.txtStep 2
From the Content Builder app, select the create button on the top right side and the select Code Snippet.
Step 3
Copy over the content in the myCustomFont.txt into the textarea and save.
Take note of the ID value as we will be using this in a later stage in the CloudPage.
Step 4
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>My CloudPage</title>
</head>
<body>
<style>
@font-face {
font-family: "CustomFamily";
src: url(data:font/ttf;charset=utf-8;base64,%%=ContentBlockbyId("136180")=%%) format('truetype');
font-weight: 400;
font-style: normal;
}
</style> // Use the custom font-family.
<h1 style="font-family:'CustomFamily',Arial;text-transform: capitalize;color: #1b278;">This is my heading</h1> </body>
</html>
Let's quickly break down above code.
We are simply using a basic font-face syntax with the power of Data URL. Which gives us the flexibility to embed small files’ inline in documents.
We then provide the Content Builder Code Snippet block ID created in step 3 inside the AMPScript ContentBlockbyId method.
url(data:font/ttf;charset=utf-8;base64,%%=ContentBlockbyId("136180")=%%) format('truetype');If you were using .woff the url code will look like;
url(data:font/woff;charset=utf-8;base64,%%=ContentBlockbyId("136180")=%%) format('woff');And there you go, now you know how to load custom fonts into your CloudPages.
Inspiration
https://salesforce.stackexchange.com/questions/235480/custom-font-in-email-content-blocks
https://stackoverflow.com/questions/38464695/how-to-convert-encode-fonts-into-base-64-format
