Skip to main content Skip to complementary content

Creating themes with custom fonts

These examples show how to set the font for text and labels in all built-in charts using the custom theme JSON properties. By setting these JSON properties, you can:

  • Use both custom fonts and standard fonts.
  • Set the font for the top level of the theme.
  • Set the font for all lower levels of the theme.


The fontFamily property is under development. Do not rely on it. It may change or be removed in future versions.

Defining the font

You can specify the font of your choice for text and labels by defining the fontFamily property in the main JSON file for the theme.

"object": { "title": { "main": { "fontSize": "28px", "fontFamily": "Arial" } } }

Adding custom fonts using CSS

Custom fonts can be added to visualizations with the help of CSS. In this example, we create a CSS file named my_theme.css to define the custom fonts.

@font-face { font-family: "Alegreya Black"; src: url("Alegreya-Black.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: "YatraOne"; src: url("YatraOne-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }

Here is an example of the main JSON file that references the CSS file.

{ "_inherit": true, "customStyles": [ { "cssRef": "my_theme.css", "classRef": "theme-style" } ], "fontFamily": "YatraOne", "object": { "title": { "main": { "fontSize": "28px", "fontFamily": "Alegreya Black" } } } }

The contents of the theme folder for this example would look something like this:

  • Alegreya-Black.ttf
  • my_theme.css
  • my_theme.json
  • my_theme.qext
  • YatraOne-Regular.ttf

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!