Custom Fonts

Fonts that appear in CH5 projects can be customized. Download the desired font and place the font file in the app/project/assets > fonts folder. If the fonts folder does not exist in this location, create it manually first.

Add @font-face {} to app/project/assets/scss/_fonts.scss, and then add the following within the curly braces as shown in the example below:

Copy 
// Add font-famly: '[font]', where [font] is the font name that is being added.
// Add src: url("[path]"), where [path] is the path of the source font file.

@font-face {    
    font-family: 'CrestronSansPro';  
    src: url("../../../../app/project/assets/fonts/CrestronSansPro.woff2") format('woff2');
}

$font-family can be added to app/project/assets/scss/_variable.scss with the font family name. Font family allows the browser to select a similar font in the generic family if the provided font is not available.

Copy 
$font-family: 'CrestronSansPro'

After adding @font-face {} to app/project/assets/scss/_fonts.scss, import the _fonts.scss file into app/project/assets/scss/_main.scss with the following command.

Copy 
@import "fonts";

font-family can also be used in the CSS within an attribute.

Copy 
div {
    font-family: $font-family;
}

To use the variables such as $font-family in any other scss file (not available in the app/project/assets/scss folder), all relevant scss files have to be imported.

More information can be found in the following reference links: