How to Configure Custom Fonts in a Mendix Native Mobile Android Application

Vinicius Strugata Ambrosio
4 min readApr 30, 2023

This procedure complements the Mendix documentation on this topic, presenting some additional tips and hints

Photo by Brett Jordan on Unsplash

The default font style defined in the Mendix React Native Template oftentimes doesn’t comply with the font style chosen by the UI/UX designer in Figma. If you need to change the default font, this article is for you. It complements the Mendix Documentation presenting some additional steps required to achieve the design defined in Figma (or any other visual design tool).

Introduction

Custom fonts are an extra resource that should be configured in your Mendix Native Application. Therefore, during the development phase of your app, you cannot use the standard Make it Native 9 available in the Google Play Store to see the custom fonts. You must build a tailored Developer Application App specific to your project, otherwise, the desired font won’t show up.

Procedure to build the Custom Developer App

The procedure to add custom fonts to your project is documented in the Images, Icons, and Fonts link on the Mendix website. It’s possible to add the fonts using the Mendix Native Mobile Builder UI — NBUI, or manually, by copying the desired fonts to the assets folder in one of the Android sub-directories. The NBUI can be accessed via the menu App/Build Native Mobile Appin Studio Pro.

Mendix: Native Builder UI — NBUI
Mendix: Native Builder UI — NBUI

In case you decide to use the NBUI, chose the option Build app for local development, and follow the wizard. You’ll have a chance to define the custom font in the third step.

Mendix: Custom fonts configuration in NBUI
Mendix: Custom fonts configuration in NBUI

The wizard allows us to get a javascript code snippet that will be useful afterward.

Mendix: Custom Font Style Code Snippet
Mendix: Custom Font Style Code Snippet

By the end of the process, you will have an APK named app-dev-debug.apk that can be installed in your Android emulator. The full procedure to build APKs using NBUI is beyond the scope of this article; see details in Build Native Apps from Mendix Documentation.

If you investigate the source code, will note the presence of your custom fonts in the folder structure in the React Native template:

Android Studio: Custom fonts defined in the assets folder
Android Studio: Custom fonts defined in the assets folder

In this example, I’ve added two Google Fonts: Ubuntu and Sacramento. After this, you should proceed with the building of the custom Developer App.

Back to Studio Pro, in the theme/native/main.js file, I copied the javascript snippets gotten from the NBUI Wizard. This file should include also some custom font styles to be in the design of the UI in Studio Pro:

export const ubuntuFontFamily = {
bold: "Ubuntu-Bold",
boldItalic: "Ubuntu-BoldItalic",
italic: "Ubuntu-Italic",
regular: "Ubuntu-Regular",
};

export const ubuntuMediumFontFamily = {
regular: "Ubuntu-Medium",
italic: "Ubuntu-MediumItalic",
};

export const ubuntuLightFontFamily = {
regular: "Ubuntu-Light",
italic: "Ubuntu-LightItalic",
};

export const sacramentoFontFamily = {
regular: "Sacramento-Regular",
};

export const textUbuntuNormal = {
text: {
fontFamily: ubuntuFontFamily.regular,
fontWeight: 'normal',
},
};

export const textUbuntuBold = {
text: {
fontFamily: ubuntuFontFamily.bold,
fontWeight: 'bold',
}
};

export const textUbuntuItalic = {
text: {
fontFamily: ubuntuFontFamily.italic,
fontWeight: 'normal',
},
};

export const textSacramentoNormal = {
text: {
fontFamily: sacramentoFontFamily.regular,
fontWeight: 'normal',
fontSize: 30,
lineHeight: 40,
},
};

Using the custom font styles in Studio Pro

Once you completed the above steps, all you have to do is define the custom font style in the Class property of the Widget you want to show the custom font.

textUbuntuBold custom style applied in the Widget

Then, you should run the project and launch the app using your Custom Developer App. The result is shown below:

Mendix Custom Developer Native App showing custom fonts

In the above picture, the first two blocks of text were defined to use the Ubuntu font and the third to use the Sacramento font.

Issues

  • In theory, you could define the custom font styles in the theme/native/custom-variables.js file. However, in my example, I couldn’t find a way to get the custom fonts working by using this file.
  • Be careful when editing your custom styles. If you happen to misspell the custom style name (e.g.: tetUbuntuItalic instead of textUbuntuItalic), the app will fail with no error messages. So, ensure that the name defined in the Class property of the widget is exactly the same as defined in the theme/native/main.js.

Conclusion

As with the majority of things, once you get the idea, is pretty easy to define custom fonts in a Native Mobile Mendix application. The hardest part is to build a tailored Developer App, but if you do not add another font, is a task that should be done only one time.

References

Source Code

--

--