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

Cascades

typography

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:

BlackBerry Fonts

  • Newly added font families:

New BlackBerry Fonts

New BlackBerry Fonts 2

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:

Custom Font Myriad Pro

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

Custom Fonts in BlackBerry

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

About Samar

A member of the awesome Developer Relations group at BlackBerry. A passionate flow charter and C++ coder. In love with Cascades. It is very easy to learn and truly fun to work with.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus