Introduction

This article covers all the steps needed to install a custom font family in a Mendix application.

Environment

Studio Pro v9.24.0 and newer

Instructions/Procedure

The following steps outline how to import and install font files locally:

Create a new module and mark it as a UI Resources module. For the purposes of this article, the module will be referred to as UIResourcesTest:
In your project directory, navigate to themesource\uiresourcestest\public and create a folder called fonts. In the fonts folder, place the font files of the custom font (SonnenText for the purposes of this article):

Navigate to themesource\uiresourcestest\web and create a folder called base. In the base folder, create a typography.scss SASS file with the following content describing the font files from step 2 (in this example .otf files):

/* 
========================================================================== 
* Imports - Font imports 
========================================================================== 
*/ 

//-- Patron (headlines and statements) 
@font-face { 
    font-family: "SonnenText"; 
    src: url("fonts/SonnenText-Bold-2.otf") format("opentype"); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: "SonnenText"; 
    src: url("fonts/SonnenText-Light-2.otf") format("opentype"); 
    font-weight: light; 
    font-style: normal; 
} 

@font-face { 
    font-family: "SonnenText"; 
    src: url("fonts/SonnenText-Regular-2.otf") format("opentype"); 
    font-weight: normal; 
    font-style: normal; 
}

Navigate back to themesource\uiresourcestest\web, and import the newly created typography.scss file into the existing main.scss file:
```
@import '../../../theme/web/custom-variables'; 
@import 'base/typography'; 
```
Navigate to theme\web and in the existing custom-variables.scss file, edit $font-family-base to specify the newly created font family from the typography.scss file so that it includes the new custom font first, and thereafter the other fonts to be used as fallbacks.
```
$font-family-base: "SonnenText", "Open Sans", sans-serif;
```
Press F4 in Studio Pro to Synchronize App Directory.
Deploy the application.