Change your App Font
Last updated
Last updated
The default font for apps is Fira Sans. This font can be changed to any other system font, or to a custom font that is uploaded to the app. System fonts need to be installed on a user's device in order for it to display in an app. If a font is specified that is not installed on a user's device, the app font will fall back to the default.
Since version 4.88.0 of the JourneyApps Runtime, it is possible to upload custom fonts into an app, and thereby ensure that the specified font displays for all users. When using custom fonts, the font does not have to be installed on a user's device since it will be included in the JourneyApps Runtime. See the section below for more information.
To override the default font of your application ensure you have the Show configuration files setting enabled in OXIDE, and then follow these steps:
Open your app's config.json
file using the command palette, or
Select the Overview
workspace (top left)
In the App Tree panel, expand Other
Select the config.json
file
Use OXIDE's autocomplete to add the top-level font_override
property to the file if it does not yet exist
The font_override
property takes the app's font name as its value
For example, if the app's font should be Arial, specify it as "font_override": "Arial"
Deploy your app
Example extract from the config.json
file:
Current limitations
Only .ttf
font files are currently supported
Custom fonts can be configured as follows:
Upload the font's .ttf
file as an asset to your app using OXIDE. You can trigger the Upload assets action using the command palette, or by opening the Assets panel and dragging the font file into the Assets folder:
All fonts will automatically be organized into a fonts subfolder. A preview of the font can be viewed when selecting it from the list:
Hover over a glyph to view its HTML code, and click to copy the code to your clipboard. These can be used to display special characters on a view.
Use OXIDE's autocomplete to add the top-level fonts
property to the file if it does not yet exist. This is an array containing a list of font objects.
A font object declares the name
of the custom font and associates an asset with it by setting a path
to the font file in the app's Assets
Note: The name
provided here should be unique as it will be used to reference the particular font when configuring the font override in the app.
Deploy your app
Example extract from the config.json
file:
Since version 4.88.0 of the JourneyApps Runtime, most components also have a font
attribute to override the font of individual components. The font
attribute accepts the name of a custom font or a system-installed font such as Arial. If any of these fonts cannot be found, Fira Sans is used as a fallback.
Example:
Setting the font_override
property overrides the font of the entire app. The section below explains how the font of an individual component can be changed.
Next, we need to configure our app to use the font asset. These steps are very similar to setting a , but contain a few additional steps.
Open your app's config.json
file (see the instructions for more details)
Override the font app-wide by setting the top-level font_override
property (see the instructions for more details)