Using Custom Fonts

If you have a custom font, you can use them by adding them via the Appcues Styles page using one of the following:

Google Fonts

Step 1

Navigate to the Google Fonts page and select the fonts you wish to include in your Appcues theme. First, you'll navigate to the page for the font then the font can be added to your fonts list with the 'Select this style' option.

Step 2

 Open up the 'Family/Families Selected' drop-down and copy the URL provided. (&display=swap does not need to be included)

Step 3

Open up the Font Manager window by clicking 'Header font' or 'Body font' and selecting 'Add Google Font'. Underneath the label 'Font URL' you will see an input field. Paste your copied URL here and press the 'Save' button. 

Step 4

In the 'Title font' and 'Body font' drop-down menus, you will now be able to select the fonts you have added via Google Fonts. (Note: If you save a theme without selecting one of the google fonts from either drop-down menu, the google font will be removed from you styles altogether to improve performance and load time).

Adobe Typekit

Note: Recently, Typekit has offered a different way to import text-fonts and moving away from domain listing. You can follow along to import your Typekit font into your CSS of your theme using the steps here: Be sure to use the @import steps!

Step 1

You can view your published kits on the  Typekit dashboard. The only thing Appcues needs to utilize your published Typekit is the Kit ID.

 In order to use Typekit with Appcues, you will need to ensure that the kit is published and approved on all domains you wish to build Appcues flows on (as well as if you wish to be able to preview the imported fonts on the styling page). You can add these values by clicking on the 'Kit editor' option for the kit you wish to include in Appcues.

Include all domains you want to build Appcues content on, as well as to ensure that your styling page will accurately affect the look of your Appcues content

Step 2

Once you have your kit properly configured, open up the Font Manager window by clicking 'Set up Google Fonts or Typekit' on the styling page. You can enter your Kit ID in the 'Typekit ID' field and click 'Save custom font(s)'

Step 3

Now you can assign the included font-families to Appcues content using our CSS editor. If you have included in your kit's list of domains, you will be able to instantly preview this font on the styling page. 

Custom CSS

The CSS editor is a valuable resource to import fonts from self-hosted or third-party sources or apply fonts to particular items in your Appcues flows. This section will guide you through the process of importing and applying a custom font.

Step 1

Bring up the CSS Editor tab on the themes page

Step 2

Create an `import` declaration in your custom CSS linking to the font of your choice. For instance, if you wanted to import a font from a self-hosted S3 bucket you could do so like this.

@import url(;

Alternatively, you could import a font file directly by using @font-face.

@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 800; src: local('Raleway Black'), local('Raleway-Black'), url( format('ttf'); }

Step 3

Specify the elements you want to apply your new font-face to by specifying the name you gave the font-face ('Raleway' above) as the font-family for the elements in your custom CSS. You can apply the font to just your header elements like so. You should be able to see your font being used in the 'Interactive Preview' section.

If we wanted to apply the font to all elements in your Appcues flows, you could do so using the * selector.

@import url(;

* { font-family: 'Raleway', futura, sans-serif; }

Loading Custom Fonts for Checklists

Custom fonts can be loaded in checklists by setting the Font Family to Custom

and then entering in the Custom Font URL and adding the Custom Font CSS

In this case we're using the Staatliches font from Google Fonts ( and we've set the Custom Font URL to and added the appropriate reference to the font ('Staatliches') in the Custom Font CSS section.

If you're hosting your own fonts those will need have their font-face reference set in a separate file and that file can be used as the Custom Font URL.
For example the resource file for the Staatliches Google Font looks like this:

``` /* latin-ext */ @font-face { font-family: 'Staatliches'; font-style: normal; font-weight: 400; font-display: swap; src: url( format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Staatliches'; font-style: normal; font-weight: 400; font-display: swap; src: url( format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } ```

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.