Theme Not Fully Applying

[Anonymous]

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.

[tlane317]

I am having the same exact issue. 

[Anonymous]

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:

[v-xiaotang · Accepted 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.

[Anonymous]

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?

[Anonymous]

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" }

 },

[v-xiaotang]

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.