Studio allows you to customise the font used on your campaign pages so the page better matches your organisation’s brand style and visual identity.
There are two ways to apply a custom font to a Studio page:
-
Use a Google Font
This is the simplest option if your preferred font is available from Google Fonts. You can add the font by including the Google Fonts embed code and applying the font family in your page styling. -
Upload a font as your organisation’s public resource
This option is useful if your organisation has its own brand font that is not available on Google Fonts. The font file can be uploaded as a public resource, then referenced in the page’s custom CSS.
This article explains both methods and how to apply the selected font to your Studio page.
Method 1: Use a Google Font
Step 1: Locate your font from Google Fonts
Go to Google Fonts and search for the font you want to use, then click Get font in the top-right corner.
Step 2: Reference your google font in your Studio page
- Click Get embed code button to enter Embed Code interface
- Make sure your tab is at “Web” and “link” option is selected
- Copy the code under “Embed code in the <head> of your HTML” by clicking Copy Code
- Paste this code into “Add Head Script” in the Update Details section of your Studio page.
3. Use your google font in your Studio Page
Copy the CSS class template below and paste it inside Body Script Code section of your Studio Page. The yellow highlighted part need to be replaced to the name provided by Google Font.
<style>
body * {
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
</style>
Step 4: Submit and View your page for testing
Method 2: Upload a font as your organisation's public resource
Step 1: Download your font file
Ask your in house graphic designer your branded font file to upload. The file is recommended to be in .woff or .woff2 format.
Step 2: Upload the font file to Salesforce for public access
- In Salesforce, go to Setup by clicking the gear icon in the top-right corner
- In Quick Find, search for Static Resources, then open the Static Resources page
- Press New
- Enter a name for the Static Resource (Note this name as you'll need it for later)
- Make sure Cache Control is set to Public
- Upload your font file
Step 3: Reference and apply the font on your Studio Page
Add code template below into “Body Script Code” in the Update Details section of your Studio page.
<style>
@font-face {
font-family: '{YourFontName}';
src: url('{base site url}/resource/{static resource name}') format('woff');
font-weight: normal;
font-style: normal;
}
body * {
font-family: '{YourFontName}', sans-serif !important;
}
</style>
Replace the highlighted placeholders as follows:
• {base site url}: the Base Site URL copied from the Merchant Facility
• {static resource name}: the name of the uploaded Static Resource of your font file
• {YourFontName}: Name of your font. Make sure the name is used consistently in two places
Step 4: Submit and View your page for testing