Add More Typographic Visual Style to Your App with the 10.2 Release

You have expressed to us that you would like to be able to add more customization to your app’s visual style, either to maintain its visual style across all mobile platforms, to abide with your app’s branding requirements or to simply add some individuality to your app and stand out of the crowd. We have been listening to your feedback and circling it back to our product teams, and in the 10.2 Gold SDK, two features have been added that will help you achieve this unique approach to your app’s visual style, specifically to your app’s typography design.

Update #1

We have added support to many new font families on top of the already supported generic ones. You can now apply the following font families to your Cascades text controls (screenshots taken from a BlackBerry Z10):

Already supported generic font families:

Newly added font families:

There are two ways to apply a font family to a Cascades text control:

Using the fontFamily attribute of the textStyle property of the text control

        Label {             id: label             text: "This is Verdana"             textStyle {                 base: SystemDefaults.TextStyles.NormalText                 color: Color.Gray                 fontFamily: 'Verdana, Sans-Serif' //Use Sans-Serif as a fallback             }             multiline: true   }

Or using HTML markup directly inside the text property of the text control (checkout this blog post for more details)

        Label {             id: label             text: "<html> <span style='font-family: Tahoma,Sans-Serif;'>This is Tahoma</span></html>"                        multiline: true  }

Note: It is highly recommended to specify a generic font family as a fallback to the special font family. Also, characters that are neither found in the specified font family, nor in the fallback font family, will be determined by the system from the best available font family.

Update #2

We have also added a special API called FontFaceRule that allows you to use your unique custom fonts:

The API supports the True Type Font (TTF) and the Open Type Font (OTF) formats. To use this API follow the following steps:

Make sure you are using the 10.2 SDK
Import Cascades 10.2 to the QML files that include the text controls

import bb.cascades 1.2

Place your .ttf and .otf files directly in your assets folder

Add a TextStyleDefinition object to the attachedObject property of your top visual control
Use the new rules property of the TextStyleDefinition object to define the FontFaceRule API
Define the fontFamily and the source properties of the FontFaceRule control (if one of those two properties isn’t defined the rule will be ignored)

attachedObjects: [             TextStyleDefinition {                 id: myCustomStyle                 rules: [                     FontFaceRule {                         id: myFontFaceRule                         source: "asset:///mycustomfont1.ttf"                         fontFamily: "MyFontFamily"                     }                 ]             } ]

Finally, use your custom style in your text controls by applying this custom font under the base property of the textStyle property of the text control

        Label{             id: myLabel             text: "This is my custom text style"             textStyle {                 base: myCustomStyle.style             }  }

Note: Currently, text style rules can only be applied to controls defined in QML.

I hope you will find those two newly added features as useful and as easy to use as I do. Let me know if you have any questions in the comments’ section below, or tweet me at @SamarAbdelsayed.

Add More Typographic Visual Style to Your App with the 10.2 Release

About sabdelsayed