Quick tip: How to use custom fonts in your Resco mobile application

We understand that everyone wants their application to stand out and follow their branding. Specific coloring, custom themes and icons are a good start, but the custom font is one of the things that majorly contribute to the application’s visual and identity.That’s why we have introduced an option to use custom fonts in the December release. All you need, to set a custom font is the specific font in TrueType file type (.ttf) and Resco’s App Configurator configuration tool.

First step is to create a new folder in App Configurator’s Offline HTML section (1) by clicking on the New Folder button (2). The folder needs to be named “Fonts” (3).

fonts_1

Next, we open the Fonts folder and upload (1) the .ttf file of the font we have chosen. It will be displayed in the list underneath (2).

Beware, the file name can consist only of the letters, numbers, underscore or dots. App Configurator won’t let you upload any files that contain other characters.
fonts_2
The next steps differ a bit depending on what we want to change. Let’s go through two basic examples:

Custom font for the items in Home menu and changing an existing style
Custom font for the specific form item

Custom font for the items in the Home menu and changing an existing style

All items in the home menu/view use the same Primary style. If we want all items using this style to have a custom font, we need to change this style.

First, we need to open any entity, let’s choose Account (1). There we need to open the View, in our case Default, a public view (2).

fonts_3

In this view, we click on the Edit Styles button (1) which opens the list of all available styles for the view. There we need to select the Primary style (2).

fonts_4

In the Primary style’s properties we need to enter the exact name of the .ttf font file we have uploaded, into the FontName Then we Save&Close both Edit Styles window and the View window. After that we can publish the project.

fonts_5

And there it is. After the synchronization, our font changes are propagated in the app.

fonts_6

Custom font for the specific form item

Let’s say that we want to do more specific changes. In this example, we want the Name field of the Account Form to stand out, so our intention is to change its font.

Similarly to the previous example, we’ll navigate to the Account entity. There we need to open the Form, where the mentioned Name field is located. There, we select the Name field (1). As we can see in its Properties on the left (2), currently it has Normal style. We need to create a new style, so we click on the Edit Styles button (3).

fonts_7

First, we’ll click on the Add button (1). This will create a new style. We can rename it to a less generic name by editing the Name field (2) but it isn’t really necessary. What’s important for us is entering the exact name of the .ttf font file we have uploaded, into the EditorFontName Now we can Save& close the Edit Styles window.

fonts_8

The last step we need to do is to pick the newly created style in the Name item’s properties. Then we can Save&Close the Form and publish the project.

fonts_9

And that’s it! As you can see, the Name field now has a custom font.

fonts_10
If you have any additional questions feel free to contact us through Resco Support portal.