Fonts in Firefox affected by Theme

[RoseyAlexa]

Firefox replaces Visual's fonts with the Firefox Default font (set in Firefox preferences).

This happens with a custom theme, but not the default theme.

How do I alter my theme to stop this happening?

Custom colour theme: Segoe UI font changes to Default Firefox font (times new roman)

Custom theme: Visual takes default Firefox font

Default colour theme: Segoe UI font does not change

Default theme: Visual keeps segoe UI font

What am I doing wrong in my theme?

[mwegener]

Hi @RoseyAlexa ,

try "Segeo UI" instead of "Segeo UI Semibold".

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[RoseyAlexa]

Segoe UI didn't make any difference 😞

[mwegener]

Hi @RoseyAlexa ,

here is a default theme definition.

{
    "name": "CY19SU06",
    "dataColors": [
        "#118DFF",
        "#12239E",
        "#E66C37",
        "#6B007B",
        "#E044A7",
        "#744EC2",
        "#D9B300",
        "#D64550",
        "#197278",
        "#1AAB40",
        "#15C6F4",
        "#4092FF",
        "#FFA058",
        "#BE5DC9",
        "#F472D0",
        "#B5A1FF",
        "#C4A200",
        "#FF8080",
        "#00DBBC",
        "#5BD667",
        "#0091D5",
        "#4668C5",
        "#FF6300",
        "#99008A",
        "#EC008C",
        "#533285",
        "#99700A",
        "#FF4141",
        "#1F9A85",
        "#25891C",
        "#0057A2",
        "#002050",
        "#C94F0F",
        "#450F54",
        "#B60064",
        "#34124F",
        "#6A5A29",
        "#1AAB40",
        "#BA141A",
        "#0C3D37",
        "#0B511F"
    ],
    "foreground": "#252423",
    "foregroundNeutralSecondary": "#605E5C",
    "foregroundNeutralTertiary": "#B3B0AD",
    "background": "#FFFFFF",
    "backgroundLight": "#F3F2F1",
    "backgroundNeutral": "#C8C6C4",
    "tableAccent": "#118DFF",
    "good": "#1AAB40",
    "neutral": "#D9B300",
    "bad": "#D64554",
    "maximum": "#118DFF",
    "center": "#D9B300",
    "minimum": "#DEEFFF",
    "null": "#FF7F48",
    "hyperlink": "#0078d4",
    "visitedHyperlink": "#0078d4",
    "textClasses": {
        "callout": {
            "fontSize": 45,
            "fontFace": "DIN",
            "color": "#252423"
        },
        "title": {
            "fontSize": 12,
            "fontFace": "DIN",
            "color": "#252423"
        },
        "header": {
            "fontSize": 12,
            "fontFace": "Segoe UI Semibold",
            "color": "#252423"
        },
        "label": {
            "fontSize": 10,
            "fontFace": "Segoe UI",
            "color": "#252423"
        }
    },
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "transparency": 0,
                        "wordWrap": true
                    }
                ],
                "categoryAxis": [
                    {
                        "showAxisTitle": true,
                        "gridlineStyle": "dotted"
                    }
                ],
                "valueAxis": [
                    {
                        "showAxisTitle": true,
                        "gridlineStyle": "dotted"
                    }
                ],
                "title": [
                    {
                        "wordWrap": "true"
                    }
                ],
                "lineStyles": [
                    {
                        "strokeWidth": 3
                    }
                ],
                "wordWrap": [
                    {
                        "show": true
                    }
                ],
                "background": [
                    {
                        "show": true,
                        "transparency": 0
                    }
                ],
                "outspacePane": [
                    {
                        "backgroundColor": {
                            "solid": {
                                "color": "#ffffff"
                            }
                        },
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "transparency": 0,
                        "border": true,
                        "borderColor": {
                            "solid": {
                                "color": "#B3B0AD"
                            }
                        }
                    }
                ],
                "filterCard": [
                    {
                        "$id": "Applied",
                        "transparency": 0,
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "border": true
                    },
                    {
                        "$id": "Available",
                        "transparency": 0,
                        "foregroundColor": {
                            "solid": {
                                "color": "#252423"
                            }
                        },
                        "border": true
                    }
                ]
            }
        },
        "scatterChart": {
            "*": {
                "bubbles": [
                    {
                        "bubbleSize": -10
                    }
                ],
                "general": [
                    {
                        "responsive": true
                    }
                ],
                "fillPoint": [
                    {
                        "show": true
                    }
                ]
            }
        },
        "lineChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "map": {
            "*": {
                "bubbles": [
                    {
                        "bubbleSize": -10
                    }
                ]
            }
        },
        "pieChart": {
            "*": {
                "legend": [
                    {
                        "show": true,
                        "position": "RightCenter"
                    }
                ],
                "labels": [
                    {
                        "labelStyle": "Data value, percent of total"
                    }
                ]
            }
        },
        "donutChart": {
            "*": {
                "legend": [
                    {
                        "show": true,
                        "position": "RightCenter"
                    }
                ],
                "labels": [
                    {
                        "labelStyle": "Data value, percent of total"
                    }
                ]
            }
        },
        "pivotTable": {
            "*": {
                "*": [
                    {
                        "showExpandCollapseButtons": true
                    }
                ]
            }
        },
        "multiRowCard": {
            "*": {
                "card": [
                    {
                        "outlineWeight": 2,
                        "barShow": true,
                        "barWeight": 2
                    }
                ]
            }
        },
        "slicer": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "waterfallChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "columnChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "clusteredColumnChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "hundredPercentStackedColumnChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "barChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "clusteredBarChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "hundredPercentStackedBarChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "areaChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "stackedAreaChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "lineClusteredColumnComboChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "lineStackedColumnComboChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "ribbonChart": {
            "*": {
                "general": [
                    {
                        "responsive": true
                    }
                ]
            }
        },
        "group": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "basicShape": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "image": {
            "*": {
                "background": [
                    {
                        "show": false
                    }
                ]
            }
        },
        "page": {
            "*": {
                "outspace": [
                    {
                        "color": {
                            "solid": {
                                "color": "#FFFFFF"
                            }
                        }
                    }
                ],
                "background": [
                    {
                        "transparency": 100
                    }
                ]
            }
        }
    }
}

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[RoseyAlexa]

I've changed my theme to Exactly match the defult theme in the text classes.

It did nothing. Still same problem.

"textClasses": {
"callout": {
"fontSize": 45,
"fontFace": "DIN",
"color": "#252423"
},
"title": {
"fontSize": 12,
"fontFace": "DIN",
"color": "#252423"
},
"header": {
"fontSize": 12,
"fontFace": "Segoe UI Semibold",
"color": "#252423"
},
"label": {
"fontSize": 10,
"fontFace": "Segoe UI",
"color": "#252423"
}
},

[mwegener]

Could you share your Theme File?

[RoseyAlexa]

@mwegenerhow do I do that?

Stupid question, but there doesn't seem to be a way to attach a file to this post?

[mwegener]

Hi @RoseyAlexa ,

you can upload the file to DropBox, One Drive or another similar and publish the link.

[RoseyAlexa]

@mwegener  link to the Json file:

Colour Theme_RA 

[mwegener]

Hi @RoseyAlexa ,

maybe it's your Firefox version...
It works in my version.

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[RoseyAlexa]

I'm on the same version as you. On a MacBookPro.

[RoseyAlexa]

I'm narrowing it down.I stripped down my colour theme, and then started builfing it back up, a piece at a time.

1. colour theme that only contained my data colours - OK

2. Added in Text classes - OK.

3. Added in visual styles just for titles - titles reverted to Firefox Times New Roman.

Here is the part that I added in at that point:

"visualStyles": {
"*": {
"*": {
"title": [{
"show": true,
"fontColor": { "solid": { "color": "#FFFFFF" } },
"background": { "solid": { "color": "#a8b3b7" } },
"alignment": "center",
"fontSize": 10,
"fontFamily": "Segoe UI"
}],

I wonder if it's those "*" bits at the start. What do they control?

Is this bit using the Firefox default?

"visualStyles": {
"*": {

[mwegener]

Hi @RoseyAlexa ,

i found this...

https://techcommunity.microsoft.com/t5/Office-365/Segoe-UI-Font-Support-for-Mac/m-p/54936

...

The Segoe UI font family is the official font for Microsoft and is used throughout Office 365 (including SharePoint). The font is included with all Windows and Office 365 installs for PCs; however, it is not included in Office 365 for Mac installs. 

...

It would be ideal if it just came installed with Office on Macs. But in the meantime as a temporary solution, I found you can download and install the Segoe fonts on Microsoft’s fabric website below:

https://developer.microsoft.com/en-us/fabric#/resources

But, make sure you check the font license agreements.

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[RoseyAlexa]

I think thats irrelevant.

Since the Segoe UI comes through fine with the default theme, which uses Segoe UI and appears OK on Firefox.

So it has to be an error with my theme.

[mwegener]

Hi @RoseyAlexa ,

you can easily test it with this HTML file.

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:'Segoe UI';">Segoe UI</h1>
</body>
</html>

HTML-File

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[RoseyAlexa]

Thanks for all your help on this @mwegener . I appreciate your time.

That HTML does go to the default Firefox font. I set that the Arial Black, just so I could clearly see the difference.

I'm losing the will to live here.

Might just have to use Arial in all my reports, so its looks the same in all the browsers.

How boring!!!

[mwegener]

Or you install the Segoe UI Font.

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.

[RoseyAlexa]

I cant do that for 150 users

[RoseyAlexa · Accepted solution]

I've redone my theme.

Using Arial mostly, Trbuchet MS for titles and DIN for data labels.

For reference, the only fonts out of the 'standard' Power Bi fonts that display OK in a variety of browsers seem to be:

• Arial
• Arial Black
• Arial Unicode MS
• Comic Sans MS
• Courier New
• DIN (which turns into DIN alternative)
• Georgia
• Symbol
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Wingdings

But the Service itself seems to use Helvetica as a default, for menus etc.

Extremely frustrating!!!

[mwegener]

Hi @RoseyAlexa 

try this Theme

I found this "Web Open Font Format" on the Power BI site.

"fontFace": "wf_segoe-ui_normal"

"fontFace": "wf_segoe-ui_semibold"

"fontFamily": "wf_segoe-ui_bold"

If I answered your question, please mark my post as solution, this will also help others.

Please give Kudos for support.