To add additional fonts to your app that’s not listed in the drop-down list of the “Design” tab of your App Manager, follow the instructions below.  You will be able to add a font from “Google Fonts”.  Click here to go to Google’s website and view all available options.

Getting Started:

1) Find the font you want to use on Google Fonts (click here).

2) Log into your App Manager and select your app.

3) Click Colors from the left-hand-side of the screen (or the middle of the screen).

4) Scroll down to the Advanced SCSS box and past the following code. If there is already code in the advanced SCSS box, do not remove it.  Start a new line “after” the last character in the box, then paste the code below.

/** Begin import google font.*/
@import url(‘https://fonts.googleapis.com/css?family=Ewert’);
.view {
* {
font-family: ‘Ewert’ !important;
}
}
/** End import google font.*/

5) Click Save.

NOTE: In this example we have imported the font “Ewert”.  You can replace “Ewert” with the font that you want to use. If you want to limit the font to specific sections of the app, just change the feature class.  Here’s an example:

/** Begin import google font.*/
.module-folder2 {
font-family: ‘Ewert’ !important;
}
/** End import google font.*/