How to Use Custom Fonts

You may have a specific font that you'd like to use in your Appcues content that isn't necessarily available on all platforms. The best way to do this is to import a font into your custom CSS.

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