Importing Custom Fonts Using Google & Adobe

These features available on All Paid Plans

Contents

Importing Google Web Fonts
Importing Adobe Fonts
Using Your New Fonts

Overview

Currently, our Campaign Builder has a predetermined list of fonts available for use when building your campaigns in ShortStack. If you want to use fonts outside of that list, your best options are to use either Google Web Fonts (free) or Adobe Fonts (paid). This help doc walks through the process of using both.

Note: These services are provided by third parties; as such our Support team will not be able to help troubleshoot any issues that might occur with them, or be able to look at/correct custom code. Use at your own risk.

Importing Google Web Fonts

Google Web Fonts is an easy-to-use, free web service provided by Google for embedding non-standard fonts into a web page. For more information, see About Google Web Fonts.

1. Go to the Google Web Fonts homepage.
   
   
2. Find a font you want to use and click on it to open its page; here we'll select "Festive."
   
   
   
   
3. On the font's page, add the font to your collection by clicking the + Select this style button to the right of where the font example is displayed.
   
   Repeat Steps 2 and 3 for any and all fonts that you want to use in your campaign.
   
   
   
   
4. When you've made all of your choices, click on the View your selected families icon in the top-right corner of the screen.
   
   
   
   
5. A panel will pop in on the right side of your browser with all the code you need to use the font family/families you've selected. Make sure that the radio button next to <link> is selected, and then copy the code in the Use on the web section.
   
   
   
   
6. Now, go into the Campaign Builder in ShortStack, and add a new Code Widget to your campaign. Paste your copied code into the field in the Setup section. Then, in the Placement section, select Before </head>. Click the Save & Exit button when you're finished.
   
   
   
   
7. The CSS rules to specify families section of the Google Web Fonts panel shows the font-family declaration you’ll need for your CSS.
   
   
   
   
8. Check out the Using the New Fonts section below to start using your new fonts!
   
   

Importing Adobe Fonts

Adobe Fonts/TypeKit is part of the Adobe Creative Cloud, used by many professional designers for embedding non-standard fonts into their websites and design projects. For more information, see the Adobe Fonts website.

1. Open Adobe Creative Cloud, then click on the Fonts icon in the top-right.
   
   
   
   
2. This section will display fonts that you've already made active; let's find a new font entirely. Click the Browse more fonts button in the top-right; this will open Adobe Fonts in a new tab in your web browser.
   
   
   
   
3. Find a font you want to use and click on its View Family button to open its page; here we'll select "Pentz."
   
   
   
   
4. On the font's page; click on the </> Add to Web Project link. 
   
   
   
   
5. In the pop-up that appears, you'll need to create a new project or add the font to an existing project. Click the down arrow to the right, then click + Create a new project. Then, type your project's name using the field.
   
   
   
   
6. Check the box or boxes for the fonts you'd like to use, then click the Create button.
   
   
   
   
7. The pop-up will update with all the code you need to use the font/fonts you've selected. Click the copy to clipboard icon to the right of the code shown in the pop-up.
   
   
   
   
8. Now, go into the Campaign Builder in ShortStack, and add a new Code Widget to your campaign. Paste your copied code into the field in the Setup section. Then, in the Placement section, select Before </head>. Click the Save & Exit button when you're finished.
   
   
9. The Fonts added section of the Adobe pop-up shows the font-family declaration you’ll need for your CSS.
   
   
   
   
10. Check out the Using the New Fonts section below to start using your new fonts!
    
    

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 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 (which we chose from Adobe), and the font in the Rich Text Widget with the CSS ID #rich_text2 to Festive (which we chose from Google).

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

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

This code will automatically use the designated fonts, and in some out-of-the-ordinary circumstances where the font isn't able to load, it will load a font from the backup font family (sans-serif, cursive) instead.