Importing Custom Fonts

These features available on All Paid Plans

Overview

ShortStack's Campaign Builder offers a predefined list of fonts. To use fonts outside this list, you can:

1. Upload Custom Fonts via Media Manager: Host your own font files within ShortStack.
2. Import Google Fonts: Utilize Google's free web service for embedding fonts.
3. Import Adobe Fonts: Use Adobe's paid service for a broader font selection.

Note: The Google and Adobe methods involve third-party code. ShortStack Support cannot assist with issues arising from these methods or custom code. Use at your own risk.

Additionally, ensure you have the appropriate licensing for any custom font used in your live campaign. By uploading a custom font, you acknowledge responsibility for its proper use and compliance with licensing conditions.

Uploading Fonts to Media Manager

Hosting font files in your Media Manager simplifies their use across campaigns.

Steps:

1. Access Media Manager:

   • Log into ShortStack.
   • Click Manage in the top menu.
   • Select Media from the dropdown.

2. Upload Font Files:

   • Drag and drop font files into the Media Manager window.
   • Alternatively, click the Upload button in the top-right corner to select files from your computer.
   • Accepted formats: .eot, .ttf, .woff, .woff2, .otf.

3. Integrate Font into Campaign:

   • Open the Campaign Builder for your desired campaign.

   • Click the CSS link in the top-right corner of the Style Panel to open the CSS Editor.

   • Define the font using the @font-face rule:

     @font-face {
       font-family: 'YourFontName';
       src: url('yourfontfile.ttf') format('truetype');
       font-weight: 500;
       font-style: normal;
     }
     

     
     Replace 'YourFontName' with your font's name and 'yourfontfile.ttf' with the actual font file URL. Adjust font-weight and font-style as needed.

4. Obtain Font File URL:

   • In the CSS Editor, click the A icon to open the Media Manager.
   • Select your font file and click Use Selected.
   • Copy the generated URL and paste it into the src: url('') section of your
     @font-face rule, enclosed in single quotes.

5. Apply the Font:

   • Follow the instructions in the Using Your New Fonts section, noting your font's
     font-family name.

Importing Google Fonts

Google Fonts is a free service for embedding non-standard fonts into web pages.

Steps:

1. Select Fonts:

   • Visit the Google Fonts homepage.
   • Choose a font and click on it to open its page.
   • Click Select [Style] + to add the style to your collection.
   • Repeat for additional fonts as needed.

2. Retrieve Embed Code:

   • Click the View your selected families icon (shopping bag) in the top-right corner.
   • In the panel that appears, ensure the <link> option is selected.
   • Copy the code provided in the Use on the web section.

3. Add Code to Campaign:

   • In ShortStack's Campaign Builder, add a new Code Widget.
   • Paste the copied code into the Content section.
   • In the Placement section, select Before </head>.
   • Click Save & Exit.

4. Apply the Font:

   • Refer to the Using Your New Fonts section, using the font-family name specified in the Google Fonts panel.

Importing Adobe Fonts

Adobe Fonts (formerly Typekit) is part of Adobe Creative Cloud, offering a vast selection of fonts.

Steps:

1. Select Fonts:

   • Open Adobe Creative Cloud and click the Fonts icon.
   • Click Browse more fonts to open Adobe Fonts in your browser.
   • Choose a font and click its tile to open its page.
   • Click </> Add to Web Project.

2. Create a Web Project:

   • In the pop-up, create a new project or add the font to an existing one.
   • Name your project and select the desired font styles.
   • Click Save.

3. Retrieve Embed Code:

   • After saving, the pop-up will display the necessary embed code.
   • Click the copy to clipboard icon next to the code.

4. Add Code to Campaign:

   • In ShortStack's Campaign Builder, add a new Code Widget.
   • Paste the copied code into the Content section.
   • In the Placement section, select Before </head>.
   • Click Save & Exit.

5. Apply the Font:

   • Refer to the Using Your New Fonts section, using the font-family name specified in the Adobe Fonts pop-up.

Using Your New Fonts

In the Campaign Builder, open the CSS Editor by clicking the CSS link in the top-right corner of the Style Panel.

Add the font-family declaration (using your font's correct font-family name) to the appropriate CSS selector. For example, the CSS below will change the font in my Rich Text Widget with the CSS ID #rich_text to Pentz Classic, and the font in the Rich Text Widget with the CSS ID #rich_text2 to Festive.

#rich_text { font-family: 'Pentz-Classic', sans-serif; } 

#rich_text2 { font-family: 'Festive', cursive; }