Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more.
Get startedGrow your Fabric skills and prepare for the DP-600 certification exam by completing the latest Microsoft Fabric challenge.
I have a theme.json file where I have set the font for everything to the Segoe family of fonts. When I apply the theme to an existing report, most of the settings get applied, but the fonts do not. When I go into the visual and its style settings, it appears that the correct font is selected in the dropdown, but that is not the font that appears in the visual. If I flip the font to something else then back to Segoe UI the font is applied correctly. Am I using the correct values in the theme.json file ("Segoe UI", "Segoe UI Semibold", "Segoe UI Bold")? As I mentioned the correct value is selected in the dropdown, indicating that it is matching correctly, but the font is not applied. Is this just an issue of applying a theme to an existing report?
Furthermore, when I apply the same theme to a dashboard, only a very limited set of the theme gets applied (i.e. colors) - even if the underlying reports are styled correctly. Do I need to recreate the report for the theme to apply?
Screenshots and or Screencast to come.
Solved! Go to Solution.
Hi @Anonymous
After my test, the code below works, just copy it and try
{
"name": "Sample",
"visualStyles": {
"*": {
"*": {
"*": [
{
"responsive": true,
"wordWrap": true,
"fontSize": 10,
"backColorPrimary": { "solid": { "color": "#ffffff" } },
"backColorSecondary": { "solid": { "color": "#ededed" } }
}
],
"title": [
{
"show": true,
"fontColor": { "solid": { "color": "#535353" } },
"background": { "solid": { "color": "#ffffff" } },
"alignment": "center",
"fontSize": 12,
"fontFamily": "Comic Sans MS"
}
],
"valueAxis": [
{
"showAxisTitle": true,
"labelColor": { "solid": {} }
}
]
}
}
}
}
Best Regards,
Community Support Team _Tang
If this post helps, please consider Accept it as the solution to help the other members find it more quickly.
Here is a screenshot of the theme having been applied mostly, but the Segoe UI family of fonts that I applied throughout are not getting applied. In particular note the headers and the text still in Times New Roman and Comic Sans:
Hi @Anonymous
After my test, the code below works, just copy it and try
{
"name": "Sample",
"visualStyles": {
"*": {
"*": {
"*": [
{
"responsive": true,
"wordWrap": true,
"fontSize": 10,
"backColorPrimary": { "solid": { "color": "#ffffff" } },
"backColorSecondary": { "solid": { "color": "#ededed" } }
}
],
"title": [
{
"show": true,
"fontColor": { "solid": { "color": "#535353" } },
"background": { "solid": { "color": "#ffffff" } },
"alignment": "center",
"fontSize": 12,
"fontFamily": "Comic Sans MS"
}
],
"valueAxis": [
{
"showAxisTitle": true,
"labelColor": { "solid": {} }
}
]
}
}
}
}
Best Regards,
Community Support Team _Tang
If this post helps, please consider Accept it as the solution to help the other members find it more quickly.
I think that is pretty much what I have throughout. I think in the sample I sent, for some of the top level things, I was using a fontFace property, but elsewhere I used fontFamily. Specifically, with the Segoe family of fonts, are these the values to use: "Segoe UI", "Segoe UI Semibold", "Segoe UI Bold", or is there a difference in maybe the casing or spacing that I should use in the theme.json?
Here is a sample from the theme json. This is just top level settings, but throughout the theme the fonts should be set the same on individual visuals
"dataColors": [
"#6B2FC9",
"#36C6CC",
"#1971D1",
"#17C774",
"#E54A59",
"#FAA916",
"#B597E4",
"#A9FAFC"
],
"firstLevelElements": "#171417",
"secondLevelElements": "#B2B2B6",
"secondaryBackground": "#F6F6F6",
"tableAccent": "#6B2FC9",
"good": "#17C774",
"neutral": "#B2B2B6",
"bad": "#E54A59",
"textClasses": {
"callout": { "fontSize": 32, "fontFace": "Segoe UI", "color": "#171417" },
"title": { "fontSize": 24, "fontFace": "Segoe UI", "color": "#171417" },
"header": {
"fontSize": 16,
"fontFace": "Segoe UI Semibold",
"color": "#171417"
},
"label": { "fontSize": 14, "fontFace": "Segoe UI", "color": "#171417" }
},
Hi @Anonymous
Thanks for reaching out to us.
Is there any image to show that issue? And could you share a sample with that issue for us to check? Thanks.
Best Regards,
Community Support Team _Tang
If this post helps, please consider Accept it as the solution to help the other members find it more quickly.