This week, I was working with a client who requested I use the Segoe UI font in their Power BI report. The report contained a mix of core visuals and Deneb visuals. I changed the fonts on the visuals to Segoe UI and published the report. But my client reported back that they were seeing serif fonts in some visuals. I couldn’t replicate this on my machine while viewing the report in a web browser or in Power BI Desktop.
After a bit of investigating, it was determined that the issue only occurred inside Deneb visuals when viewed in a browser on a Mac. I reached out to Daniel Marsh-Patrick, maker of the Deneb custom visual, to see if he had a solution. He suggested that “Segoe UI” may not be a sufficient name for the font outside of Windows and that I could add some fallback fonts in my font properties. A fallback font is a font face that is used when the primary font face is not available when a page is loaded.
Segoe UI is not a font that is natively available on Mac OS. It is available in the font library for Office on Mac OS, but that doesn’t help when viewing a report in a web browser.
So, I updated the configuration in my Deneb visuals. Anywhere that I had defined the font, titleFont, or labelFont properties, I changed the value from "Segoe UI" to: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif",. You can see what this looks like in my config settings below.
Lessons Learned
I learned two things from this:
- Test the Power BI report on a Mac to ensure a consistent experience.
- Make a habit of adding fallback fonts instead of specifying just one font.
I really enjoy the power and flexibility of the Deneb visual. But I’m definitely still learning about some of the nuances of using Vega-Lite such as the font issue above (which is handled by Power BI Desktop behind the scenes when we use core visuals).