Font Changes for BlackBerry 10

Native SDK Development

Here’s a helpful guest post for BlackBerry® 10 developers from Kizito Kasengulu – Ed.

The BlackBerry 10 system fonts have been updated with the new beta release of the BlackBerry 10 platform. The default font for the Cascades™ UI and bbui.js in BlackBerry 10 is Slate Pro; however, other fonts can be substituted depending on the locale and region selected for the device.
The following new fonts have been added in BlackBerry 10:

  • AkhbarOTS-Bold
  • AkhbarOTS
  • Browallia New
  • Browallia New Bold
  • Browallia New Italic
  • Browallia New Bold Italic
  • HadassahOTS-Bold
  • HadassahOTS
  • HeiseiKakuGothW5_213_C
  • HeiseiKakuGoth_JIS0213-B_C
  • HeiseiMinchoW3_JIS0213_C
  • HYGothic-Medium
  • MHeiM.GB18030_200910
  • MSungL.cp950.v311.1
  • MT Extra
  • SlatePro-Condensed
  • SlatePro-Italic
  • SlatePro-Light
  • SlatePro-LightItalic
  • SlatePro-Medium
  • SlatePro-MediumCondensed
  • SlatePro
  • Symbol
  • ThaiAltOTS-Bold
  • ThaiAltOTS

The following fonts have been deprecated, either with no replacement or because a new font eliminates the need for them:

  • MyriadPro-SemiCnIt
  • RyoTextPlusN-Medium
  • MyriadPro-BoldSemiCnIt
  • LiberationMono-Bold
  • LiberationMono-BoldItalic
  • LiberationMono-Italic
  • LiberationMono-Regular
  • LiberationSans-Bold
  • LiberationSans-BoldItalic
  • LiberationSans-Italic
  • LiberationSans-Regular
  • LiberationSerif-Bold
  • LiberationSerif-BoldItalic
  • LiberationSerif-Italic
  • LiberationSerif-Regular
  • Garuda-Bold
  • Garuda-BoldOblique
  • Garuda-Oblique
  • Garuda
  • Vera
  • VeraBI
  • VeraBd
  • VeraIt
  • VeraMoBI
  • VeraMoBd
  • VeraMoIt
  • VeraMono
  • VeraSe
  • VeraSeBd

The following fonts have been removed with a replacement added or chosen from fonts previously available. The below table summarizes the font replacements made:

Original Font Replacement Font
AdobeGothicStd-Light HYGothic-Medium
AdobeHeitiStd-Regular MHeiM.GB18030_200910
AdobeMingStd-Light MSungL.cp950.v311.1
AdobeTextPro-Bold Georgia Bold
AdobeTextPro-BoldIt Georgia Bold Italic
AdobeTextPro-It Georgia Italic
AdobeTextPro-Regular Georgia
AdobeThai-Bold Browallia New Bold / ThaiAltOTS-Bold (height restricted)
AdobeThai-BoldItalic Browallia New Bold Italic
AdobeThai-Italic Browallia New Italic
AdobeThai-Regular Browallia New / ThaiAltOTS (height restricted)
MyriadPro-Bold SlatePro-Medium
MyriadPro-BoldIt SlatePro-Medium-Italic
MyriadPro-BoldSemiCn SlatePro-Medium-Condensed
MyriadPro-It SlatePro-Italic
MyriadPro-Regular SlatePro
MyriadPro-SemiCn SlatePro-Condensed
RyoGothicPlusN-Bold HeiseiKakuGoth_JIS0213-B_C
RyoGothicPlusN-Regular HeiseiKakuGothW5_213_C
RyoTextPlusN-Light HeiseiKakuMincho

Default Fonts

File Name Full Name Scripts Supported
SlatePro-Condensed Slate Pro Condensed Latin, Greek, Cyrillic
SlatePro-Italic Slate Pro Italic Latin
SlatePro-Light Slate Pro Light Latin
SlatePro-LightItalic Slate Pro Light Italic Latin
SlatePro-Medium Slate Pro Medium Latin, Greek, Cyrillic
SlatePro-Medium-Condensed Slate Pro Medium Condensed Latin
SlatePro Slate Pro Latin, Greek, Cyrillic

The fonts listed above are the default fonts for Cascades, chosen by text style properties when no font name is provided and chosen by default for certain controls.

The following examples show how to declare text styles in both C++ and QML that will protect the developer against default font changes:

C++:

#include <bb/cascades/TextStyleDefinition>
#include <bb/cascades/SystemDefaults>
TextStyleDefinition *pTSD = new TextStyleDefinition();
pTSD->setBase(SystemDefaults::TextStyles::bodyText());
pTSD->setFontWeight(FontWeight::Bold);
TextStyle boldBodyText = pTSD->style();

QML:

import bb.cascades 1.0

Container {
attachedObjects: [
    TextStyleDefinition
    {
      id: tsd
      base: SystemDefaults.TextStyles.BodyText
      fontWeight: FontWeight.Bold
    }
  ]

  Label{
    id: label
    text: "Hello, world!"
    textStyle
    {
      base: tsd.style
    }
  }

  Label{
    id: label
    text: "Hello, world!"
    textStyle {
        base: SystemDefaults.TextStyles.NormalText
        fontWeight: FontWeight.Bold
        color: Color.Gray
    }
  }
}

Locale-Specific Fonts

File Name Full Name Scripts Supported
AkhbarOTS Akhbar MT OTS Arabic
AkhbarOTS-Bold Akhbar MT OTS Bold Arabic
HadassahOTS Hadassah OTS Hebrew
HadassahOTS-Bold Hadassah OTS Bold Hebrew
HeiseiKakuGothW5_213_C HeiseiKakuGothW5_JIS0213C Latin, Japanese JIS X 0213
HeiseiKakuGoth_JIS0213-B_C HeiseiKakuGoth_JIS0213-Bold Latin, Japanese JIS X 0213
HeiseiMinchoW3_JIS0213_C HeiseiMinchoW3_JIS0213_C Latin, Japanese JIS X 0213
HYGothic-Medium HYGothic-Medium Korean, Latin
HYGothic-Bold HYGothic-Bold Korean, Latin
MHeiB.GB18030_200910 Monotype Hei Bold GB18030 Simplified Chinese GB18030, Latin
MHeiM.GB18030_200910 Monotype Hei Medium GB18030 Simplified Chinese GB18030, Latin
BengaliOTS_v121 Bengali OTS Indic/Bengali
DevanagariOTS_v120 Devanagari OTS Indic/Hindi
GujaratiOTS_v120 Gujarati OTS Indic/Gujarati
GurmukhiOTS_v120 Gurmukhi OTS Indic/Punjabi
KannadaOTS_v120 Kannada OTS Indic/Kannada
MalayalamOTS_v1.20 Malayalam OTS Indic/Malayalam
TamilOTS_v120 Tamil OTS Indic/Tamil
TeluguOTS_v120 Telugu OTS Indic/Telugu
ThaiAltOTS-Bold Thai Alt OTS Bold Thai, Latin
ThaiAltOTS Thai Alt OTS Thai, Latin
browa Browallia New Thai, Latin
browab Browallia New Bold Thai, Latin
browai Browallia New Italic Thai, Latin
browaz Browallia New Bold Italic Thai, Latin
MSungL.cp950.v311.1 MSung Light CP950 Traditional Chinese Big5+HKSCS, Latin
MSungM.cp950.v311.1 MSung Medium CP950 Traditional Chinese Big5+HKSCS, Latin

Cascades may use one or more of the above fonts depending on the OS language and locale setting. To ensure future compatibility with font changes in Cascades, one must NOT specify a font-family or name when specifying text style unless one embeds fonts in the application that are completely under their control.

Web Core Fonts

File Name Full Name Scripts Supported
WINGDNG2 Wingdings 2 Latin
WINGDNG3 Wingdings 3 Latin
andalemo Andale Mono Latin
arial Arial Latin, Cyrillic, Greek, Arabic, Hebrew
arialbd Arial Bold Latin, Cyrillic, Greek, Arabic, Hebrew
arialbi Arial Bold Italic Latin, Cyrillic, Greek, Arabic, Hebrew
ariali Arial Italic Latin, Cyrillic, Greek, Arabic, Hebrew
ariblk Arial Black Latin, Cyrillic, Greek, Arabic, Hebrew
comic Comic Sans MS Latin
comicbd Comic Sans MS Bold Latin
cour Courier New Latin
courbd Courier New Bold Latin
courbi Courier New Bold Italic Latin
couri Courier New Italic Latin
georgia Georgia Latin
georgiab Georgia Bold Latin
georgiai Georgia Italic Latin
georgiaz Georgia Bold Italic Latin
impact Impact Latin
symbol Symbol Latin
tahoma Tahoma Latin, Cyrillic, Greek, Arabic, Hebrew, Thai
tahomabd Tahoma Bold Latin, Cyrillic, Greek, Arabic, Hebrew, Thai
times Times New Roman Latin, Cyrillic, Greek, Arabic, Hebrew
timesb Times New Roman Bold Latin
timesbi Times New Roman Bold Italic Latin
timesi Times New Roman Italic Latin
trebuc Trebuchet MS Latin
trebucbd Trebuchet MS Bold Latin
trebucbi Trebuchet MS Bold Italic Latin
trebucit Trebuchet MS Italic Latin
verdana Verdana Latin
verdanab Verdana Bold Latin
verdanai Verdana Italic Latin
verdanaz Verdana Bold Italic Latin
webdings Webdings Latin
wingding Wingdings Latin

The fonts listed above are the core Web fonts included with the BlackBerry 10 browser and also with the Cascades WebView component. BlackBerry® WebWorks™ developers can reference the above fonts in their style sheets but it is always a best practice in HTML5 to specify a generic font family as a fallback to protect against font replacement. For example (generic font family highlighted in bold):

.heading { 
   color: white; 
   font-weight: bold; 
   font-size: 10pt; 
   font-family: Arial, Helvetica, sans-serif; 
   margin: 0pt; 
   padding: 2pt 2pt; 
   white-space: nowrap;
}

Additional Fonts

File Name Full Name Scripts Supported
MTEXTRA MT Extra contains symbols
DejaVuSans-Bold.ttf DejaVu Sans Bold Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSans-BoldOblique.ttf DejaVu Sans Bold Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSans-ExtraLight.ttf DejaVu Sans ExtraLight Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSans-Oblique.ttf DejaVu Sans Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSans.ttf DejaVu Sans Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansCondensed-Bold.ttf DejaVu Sans Condensed Bold Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansCondensed-BoldOblique.ttf DejaVu Sans Condensed Bold Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansCondensed-Oblique.ttf DejaVu Sans Condensed Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansCondensed.ttf DejaVu Sans Condensed Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansMono-Bold.ttf DejaVu Sans Mono Bold Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansMono-BoldOblique.ttf DejaVu Sans Mono Bold Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansMono-Oblique.ttf DejaVu Sans Mono Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSansMono.ttf DejaVu Sans Mono Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerif-Bold.ttf DejaVu Serif Bold Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerif-BoldOblique.ttf DejaVu Serif Bold Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerif-Oblique.ttf DejaVu Serif Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerif.ttf DejaVu Serif Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerifCondensed-Bold.ttf DejaVu Serif Condensed Bold Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerifCondensed-BoldOblique.ttf DejaVu Serif Condensed Bold Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerifCondensed-Oblique.ttf DejaVu Serif Condensed Oblique Latin, Cyrillic, Greek, Hebrew, Arabic
DejaVuSerifCondensed.ttf DejaVu Serif Condensed Latin, Cyrillic, Greek, Hebrew, Arabic

OpenGL / NDK Development

When working with the NDK screen library or with OpenGL, developers must load system fonts to convert them to glyphs. The new fonts in BlackBerry 10 are all MonoType fonts and can be found under the following system directory:

/usr/fonts/font_repository/monotype/

Here is an example of how to load one of the new fonts using bb_util_load_font, one of the utility functions provided in some of the NDK example projects:

#include <stdlib.h>  /* EXIT_FAILURE */
#include <bbutil.h>

typedef struct font_t* font;

// Call bbutil_init()  (or bbutil_init_egl() in egl.h)
bbutil_init() 

// Compute the dots per inch
int dpi = bbutil_calculate_dpi(screen_cxt);

// Loads the font from the specified font file.
font = bbutil_load_font("usr/fonts/font_repository/monotype/times.ttf", 15, dpi);                                                              
       if (!font) {                                                                                                                                                                      
perror("Failed to load font");
bbutil_terminate();
return EXIT_FAILURE;
}

Developers should keep this post around as a reference in case they run into issues with fonts after upgrading to the new beta release of BlackBerry 10. The font changes should have little impact on the majority of developers.

About Alex Kinsella

Promoter of apps. Connoisseur of tacos. By day, I'm a PR and Social Media Manager at BlackBerry.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus