Many times in different scenarios of Smart Devices applications we need to use custom Fonts. This article explains how to use custom fonts in Smart Devices Applications using facilities through the Theme for Smart Devices object.
On the Theme for Smart Devices object there is a node called Fonts where the developer can incorporate custom text fonts associated with the application, whose behavior is the same as Web Fonts. This works analogously as Transformations for Smart Devices, giving the ability to:
- Add new fonts by right-clicking > Add Font option.
- Reference them from Font Family property (under Font properties group on theme classes that admit it).
||Name of the font which will be referenced by theme class.
||Name of the TTF file imported in the Knowledge Base.
Note: The other properties (i.e. Style, Stretch, Weight, and Unicode) only apply for Web Generator because they are based on CSS style tags. On the Smart Devices generator, this customization can be made through theme class properties.
Imagine a simple panel with a "start!" button. The purpose is to customize its appearance by changing its font.
In order to achieve this aim, the following steps must be followed:
1) Get the font that you want and ensure that the extension is compatible with the platform.
2) Open the Theme object and look for the Font node. Right-click it and chose Add Font option.
3) This action will display a dialog in which we must import the source file of the font (in this case, a *.ttf file called Gameplay).
4) Once the font is imported, simply select it from the dialog and click the "ok" button. After this action, the new font will be displayed under the Font node.
5) Look for the theme class control whose font you want to change (in this case, a button class) and look for Font Family. In this property, select from the combo-box the font that you need.
6) That's all. Simply run your application and the text in the control will be displayed with the new font.
- iOS only: If an *.otf font does not work in an iOS app, change its extension for *.ttf before import the file into GeneXus. For example: 'fontText.otf' to 'fontText.ttf'
- The Name property for the font must be the same that shows the font source file.
Objects: Theme for Smart Devices object
Platforms: Smart Devices(Android, IOS)
This functionality is available as from GeneXus 15 Upgrade 1.