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

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, you’ll create a CSS file named my_theme.css to define the custom fonts.

Note: Bundling font files with the theme extension is not supported in Qlik Cloud mashups.

@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