How to Configure Custom Fonts in a Mendix Native Mobile Android Application
This procedure complements the Mendix documentation on this topic, presenting some additional tips and hints
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.
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.
The wizard allows us to get a javascript code snippet that will be useful afterward.
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:
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.
Then, you should run the project and launch the app using your Custom Developer App. The result is shown below:
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.jsfile. 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 insteadoftextUbuntuItalic), the app will fail with no error messages. So, ensure that the name defined in theClass propertyof the widget is exactly the same as defined in thetheme/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.
