Skip to main content

Importing Custom Fonts

These features available on All Paid Plans

Overview

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 option is to import your own fonts using the Media Manager in your account.

Other options are available, however - you can use either Google Web Fonts (free) or Adobe Fonts (paid) to pull in fonts using those services. This help doc walks through the process of using both.

Note: The Google and Adobe methods are based on code 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.

Additionally, you (the user) are responsible for attaining the appropriate licensing to use a custom font on your live campaign. By using a custom font, you understand that you are responsible for proper use of the font you’re uploading to ShortStack, and that you are complying with the licensing conditions of said font.

 

Uploading Fonts to Media Manager

When you upload font files to your own Media Manager, you won't have to worry about hosting the files on a third-party site, which makes the fonts easier to use for any campaigns in your account. Here's how to get started:

  1. Log into ShortStack, then click Other in the menu at the top, and select Media from the drop-down.
  2. This will open the Media Manager. You can either drag and drop your font file from your computer's desktop into this window, or you can click the Upload button in the top-right corner and select the file from your computer using that method.
    Note: Accepted font file formats are eot, ttf, woff, woff2, and otf.
  3. Once you've uploaded your font file(s) to the Media Manager, you'll want to open the Campaign Builder for the campaign where you're wanting to use the font.
  4. Open the CSS Editor by clicking the CSS link in the top-right corner of the Style Panel.
  5. Before moving forward, you will need to know a bit of CSS code to be able to pull in your new font properly. Here's an example:

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

    In this example, we're using @font-face to pull in a font named "Fira Code" and have set font-weight to 500 (which is medium weight) and font-style to normal. We've added a placeholder for where the actual font URL would go (in the parentheses after src: url). The format of the source file is set to truetype because we're using a ttf file - the format will be different depending on the type of font file you use.
  6. To get your actual font file URL: In the CSS Editor, click the A icon at the top - this will open the Media Manager.
  7. The Media Manager pop-up will show you only font files that you've uploaded. Click on the file you want to use, then click the Use Selected button in the bottom corner.
  8. The file URL will pop into the CSS Editor window. Highlight this URL, cut (or copy) it, then paste it in between the parentheses after src: url - make sure to wrap it in single quote marks, like the example shows.
  9. To use this new font, follow the instructions in the Using Your New Fonts section below, making note of your uploaded font's font-family name.

 

Importing Google Fonts

Google 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.
  3. On the font's page, scroll through the available styles, and add any given font style to your collection by clicking the Select [Style] + link to the right of where the example is displayed.
  4. Repeat Steps 2 and 3 for any and all fonts that you want to use in your campaign.
  5. When you've made all of your choices, click on the View your selected families icon (the shopping bag) in the top-right corner of the screen.
  6. 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.
  7. Go into your Campaign Builder in ShortStack, and add a new Code Widget to your campaign. Paste your copied code from Google into the editor in the Content section. Then, in the Placement section, select Before </head>. Click the Save & Exit button when you're finished.
  8. To use this new font, follow the instructions in the Using Your New Fonts section below, making note of your font's font-family name in the CSS rules to specify families section of the Google Fonts panel.

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 (the lowercase f) 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 tile to open the font on its own page.
  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 Save 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 editor in the Content section. Then, in the Placement section, select Before </head>. Click the Save & Exit button when you're finished.
  9. To use this new font, follow the instructions in the Using Your New Fonts section below, making note of your font's font-family name in the Fonts added section of the Adobe 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;
}


NewFonts.jpg

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.


Was this article helpful?