Using Custom Fonts

If you have a custom font, you can use them by adding them via the Styles page within the Appcues Studio 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 in your Appcues theme by clicking 'Header font' or 'Body font' and then select '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 'Header font' and 'Body font' drop-down menus, you will now be able to select the fonts you have added via Google Fonts. Be sure to click the 'save' button in the upper right hand corner, and your Theme settings are set with your custom 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 your styles altogether to improve performance and load time).


Adobe Fonts

Step 1

In your Adobe fonts account, under the Web Projects tab, copy the project ID of the fonts project you would like to use.

Step 2

Open up the Font Manager window in your Appcues theme by clicking 'Header font' or 'Body font' and selecting 'Add Adobe Font'. In the modal that appears, there will be a field for pasting in your project ID. Paste your copied project ID here and press the 'Save' button. 

Step 3

Once you've done that, follow the instructions in this Adobe doc to embed your web project into the custom CSS section of your Appcues theme.

1. First copy the @import link from your project, leaving off the style tags on either end.

2. Paste this into the top of your theme's custom CSS section.

3. Now you can assign the web project's included font-families to Appcues content using our CSS editor.

Because simply providing the web project ID will make the theme try to use the ID as the font family, be sure to start with the following selectors to make sure you're providing a specific fall back font for all Appcues content:

body h1, body h2, body h3, body h4, body h5, appcues cue h1, appcues cue h2, appcues cue h3, appcues cue h4, appcues cue h5, .tooltip .content h1, .tooltip .content h2, .tooltip .content h3, .tooltip .content h4, .tooltip .content h5, * {
   font-family: filicudi-color-wasp, sans-serif; 
}


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

Select the CSS tab after selecting a theme to edit 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(https://s3-us-west-2.amazonaws.com/appcues-custom-fonts/raleway.css);

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(https://s3-us-west-2.amazonaws.com/appcues-custom-fonts/Raleway-Black.ttf) 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 only the header fonts like so. You should be able to see your font being used in the 'Interactive Preview' section. You may need to include an !important declaration to make sure this font rule takes precedence.

If we wanted to apply the font to all elements (both heading and body fonts) in your Appcues flows, you could do so using the * selector.

@import url(https://s3-us-west-2.amazonaws.com/appcues-custom-fonts/raleway.css);

* { 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 when editing the checklist:

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 (fonts.google.com/specimen/Staatliches#standard-styles), and we've set the Custom Font URL to https://fonts.googleapis.com/css2?family=Staatliches&display=swap and added the appropriate reference to the font ('Staatliches') in the Custom Font CSS section.

If you're hosting your own fonts, they will need to have their font-face reference set in a separate file. That file can then 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(https://fonts.gstatic.com/s/staatliches/v6/HI_OiY8KO6hCsQSoAPmtMYeVvpCfOMPTjMY.woff2) 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(https://fonts.gstatic.com/s/staatliches/v6/HI_OiY8KO6hCsQSoAPmtMYebvpCfOMPT.woff2) 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; }

Need help importing your desired fonts? Shoot us an email at  support@appcues.com and we'll be happy to help.

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