How to Use Custom Fonts

The Appcues Styles page allows you to utilize font families from Google Fonts and Adobe Typekit. This doc covers the ways you can use fonts from either of these services.

Google Fonts

Step 1

Navigate to the Google Fonts page and select the fonts you wish to include in your Appcues theme. You can add any number of fonts by pressing the plus button, and they will appear in a drop-down at the bottom of the screen with the label 'Family/Families Selected'.

Step 2

 Open up the 'Family/Families Selected' drop-down and copy the URL provided.

Step 3

On the styling page, open up the Font Manager window by clicking 'Set up Google Fonts or Typekit'. Underneath the label 'Google font import URL' you will see an input field. Paste your copied URL here and press the 'Add font(s)' button. 

Step 4

You will see a preview of the fonts that will appear in the 'Title' and 'Body' drop-down menus. If these look correct, click 'Save custom font(s)'.

Step 5

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

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  my.appcues.com 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 my.appcues.com 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 my.appcues.com 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 if you have a font that is served from another third party provider or prefer to use CSS to set your fonts.

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 the  Montserrat font, it would look like this:

@import url('https://fonts.googleapis.com/css?family=Patrick+Hand');

Google Fonts is a good source of free typography. 

Step 3

Specify the elements you want to apply your new font-face to by specifying the name you gave the font-face ('MyFontFamily' above) as the font-family for the elements in your custom CSS. For example set it on header elements:

Or just paragraph tags:

If we wanted to apply the Patrick Hand font from the Google Fonts library, example from above to all elements, the code in our CSS editor will now look like this:

@import url('https://fonts.googleapis.com/css?family=Patrick+Hand');

* {
    font-family: 'Patrick Hand';
}

Once you publish your new styling, you should see your new font being used.

Still need help? Contact Us Contact Us