Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
4 years ago
Solved

Theme Not Fully Applying

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.

Need Help
  • v-xiaotang's avatar
    v-xiaotang
    4 years ago

    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.

6 Replies

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

    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's avatar
      v-xiaotang
      Community Support
      4 years ago

      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's avatar
        Anonymous
        Not applicable
        4 years ago

        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?

  • v-xiaotang's avatar
    v-xiaotang
    Community Support
    4 years ago

    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.

  • Anonymous's avatar
    Anonymous
    Not applicable
    4 years ago

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

     },