Control (and Expand!) Your Power BI Font Selection with Themes

Control (and Expand!) Your Power BI Font Selection with Themes
Reading Time: 4 minutes

In my last post, I looked at some basic considerations for font selection in Power BI. In addition, my BlueGranite colleague Meagan Longoria pointed out in a comment that you will also see the DIN font in a few cases. She has also been working a lot on accessibility lately and provided a link to a great resource on accessible fonts. Thanks Meagan!

With DIN included, you can get 24 fonts in various dropdown menus throughout Power BI Desktop. Don’t think that your font selection ends there though. There is a way to include additional font families using themes.

HolyHelvetica

In the September 2017 update, the Power BI team extended the use of themes to include more than colors (<<cue applause>>). You can now use themes for chart styles. That also includes the ability to specify font families. The documentation provides examples of everything you can change, but of primary concern here is the property fontFamily. If you look at the documentation, you will also see titleFontFamily, secFontFamily, and secTitleFontFamily.

Oddly enough, visual titles are not affected by themes. You might think that titleFontFamily would be a good candidate, but that property alters axis titles only.

With these properties combined, you can quickly change the font family in a variety of ways: universally, only for axis titles, only for certain visuals, etc. Themes are fairly powerful in that you can have universal selections using a wildcard (*) or focus on specific visual types.

 

fontFamily

fontFamily

titleFontFamily

TitleFontFamily

secFontFamily

secFontFamily

secTitleFontFamily

secTitleFontFamily

 

 

With themes, you can even go rogue and expand your font selection outside of the default menu of 24! I chose the Harlow Solid font in this screenshot because the change is ridiculously noticeable, not because I would ever want to include it in a real report.

NonstandardFonts

If you opt to be a font rebel though, note that fonts are tricky. Most are not universal across different browsers and operating systems. Many are not “web safe”. I would consider using themes in this manner a hack unless you stick with a font family that appears in a Power BI menu already. In any case, test things out in all of the ways that your audience will see your report. Although many common fonts appear to work in Power BI Service, not all will display in the Power BI mobile app or potentially in all browsers. Chrome, Firefox, and Edge on Windows 10 seem to handle most of the common fonts I tried whereas the Power BI mobile app and Chrome and Safari on iOS had a much more limited selection.

If you choose to use the fontFamily property in a Power BI theme file, there are some caveats.

  1. Manually changing a visual’s formatting “breaks” the tie back to a theme. This is true of any theme property. It means that if you change an option such as font family manually on a visual, then import a theme with a different default font family, the visual’s font will not change to reflect the theme’s.
  2. If you specify a font family in your theme file that is not one of the 24 you regularly see in Power BI menus, and then you change a font manually and click away, your theme’s font will no longer display in the dropdown menu if you decide you want to change it back.
  3. Font family specified in a theme file works across axis labels, data labels, and more; but it does not influence any visual’s Title or Power BI’s Text Box.

Finally, I used the wildcard (*) in my examples so that the report will universally change the font (with the exception of titles and text boxes as mentioned above), but you can read up on themes and see how you can target specific visuals as well.

If you are interested in seeing all of the formatting options available to each visual, a collection of Theme snippets is now available as well.

 




2 Comments

  1. If you are not sure if your users have the font you specify in your theme, you can define other fonts as fallback options.

    For example:
    “fontFamily”: “Roboto, Segoe UI, Arial”

    It works exactly like in CSS: the first available font will be used.

Leave a Reply

%d bloggers like this: