# 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](https://help.qlik.com/en-US/sense-developer/November2025/Subsystems/Extensions/Content/Sense_Extensions/CustomThemes/custom-themes-properties.htm). 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, 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
* theme.json
* my\_theme.qext
* YatraOne-Regular.ttf