Fonts

Usage#

Fonts must be declared in Theme. You could either declare them in your app.config.json or in your application Theme implementation (see theme).

{
  "profile": {
    "Theme": {
      "fonts": {
        "MyFont": {
          "family": "MyFont",
          "path": "path/to/Font.ttf"
        },
        "MyBoldItalicFont": {
          "family": "MyFont",
          "path": "path/to/FontBoldItalic.ttf",
          "weight": 800,
          "style": "italic"
        },
        "TajawalRegular": {
          "family": "Tajawal",
          "path": "path/to/Tajawal-Regular.ttf",
          "baseline": "bottom",
          "verticalAlign": "middle"
        }
      }
    }
  }
}

To ensure compatibility with various rendering engine :

• family should be the font family stored inside the font file. As a consequence, you will probably have multiple files for one family to manage bold, thin or italic use case. Family is mandatory
• weight should describe the weight (boldness) of the fonts. This should be a number from the following list :
  • 100 - Thin
  • 200 - Light
  • 300 - ExtraLight
  • 400 - Regular
  • 500 - Medium
  • 600 - DemiBold
  • 700 - Bold
  • 800 - ExtraBold
  • 900 - Black
• style should describe the font style (normal, italic, oblique). Default value is “normal”
• baseline is optional and should be used only for Lightning renderer when facing vertical alignment issue. Possible values are :
  • top
  • middle
  • bottom
• verticalAlign is optional and should be used only for Lightning renderer when facing vertical alignment issue. Possible values are :
  • top
  • middle
  • bottom

fontConfig task by grunt#

Based on fonts declare in app.config.json only.

This task get font metrics and store some configuration in generated/profile/config/fonts.json :

• heightRatio is used to calculate the height of a font depending on size