Custom Fonts in Smart Devices Applications

Official Content
This documentation is valid for:

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.

Font node

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).
     
Property  Values Description
Name String Name of the font which will be referenced by theme class.
File Font filename  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.

Usage example

Imagine a simple panel with a "start!" button. The purpose is to customize its appearance by changing its font.

i0-Initial_vsResultpng_png

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.

i2-Font_node_theme_png

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).

i4-Selecting_font_png

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.

i3-Font_node_property2_png

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.

i6-Adding_font_png

6) That's all. Simply run your application and the text in the control will be displayed with the new font.

Notes

  • 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.
    For example,
    i8-Warning_png

Scope

Objects: Theme for Smart Devices object
Platforms: Smart Devices(Android, IOS)

Availability

This functionality is available as from GeneXus 15 Upgrade 1.



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.