Custom fonts in Power BI – everything you wanted to know!

I like Power BI, I really do! If you follow my blog carefully, you would have realized that I truly consider Power BI as an awesome tool – because it gives you an infinite number of possibilities to tell your data story. And, I’m not referring only to out-of-the-box solutions, but also custom-made ones.

However, I’ve recently come across an interesting problem (or, to be brutally honest, it didn’t look so interesting why I was trying to solve it). So, what was it all about?

Scenario

I was helping my client to build a Power BI report, and one of the main requests was that all visuals should use Roboto font. If you ask yourselves why – the answer is quite simple – they are using Roboto font in all their visual solutions, branding, etc. And, they want their Power BI report to follow that pattern and fit into a general solution. Fair enough…

Now, when you open Power BI Desktop and go to the Format pane of the visual, you can choose between 25 different fonts:

However, there is no Roboto here! So, what should we do?

Customizing report theme

For those of you who doesn’t know, you can switch between different themes in your Power BI report. Moreover, since the Power BI theme is nothing more than a simple JSON file, you can create your own theme, or additionally customize the existing one!

I’ve already explained how you can embed a background image in your theme and reuse it for visual branding. Now, we will try to extend our theme with a custom font. Under the View tab, I will choose to Save the current theme, so I can edit the source JSON file directly.

You can also use the built-in Power BI Customize current theme feature to perform a lot of adjustments, but you can’t use it to import custom font in it. I also strongly suggest checking a wonderful tool from powerbi.tips for creating your own theme, but we still need something that doesn’t exist out-of-the-box, so we will have to manually implement our adjustments.

When I open my JSON theme file in Notepad++, I see the current settings for my theme:

The property that I need to use in order to apply font settings is called: “visualStyles”. Let’s add this property and define our requirements:

{"name":"Data Mozart",
"visualStyles":{"*":{"*":{"*":[{"fontSize":12,"fontFamily":"Roboto","color":{"solid":{}}}]}}},
"dataColors":["#8BC7F7","#46B3F3","#009FEF","#008CEE","#0078ED","#0050EB","#0641C8","#0B31A5","#46647C","#235A7A","#005078","#004677","#003C77","#002876","#032164","#061953","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325"],
"tableAccent":"#8BC7F7","maximum":"#8BC7F7","center":"#0B31A5","minimum":"#D2D3D5"}

Let me briefly explain what this “visualStyles” definition means: using it, we instructed Power BI to apply Roboto font of size 12 and solid color to ALL of our report visuals! Those stars at the beginning mean – apply this to all visual elements!

Save the JSON file and let’s go back to our Power BI report and import this theme:

You can immediately notice that all my visuals changed to reflect new settings:

If you want to confirm that this is true, just open again Format pane of the visual, and you should see that Roboto font was applied to a visual:

Here, our predefined size of 12pt couldn’t be applied because of other X-axis settings (you see this small yellow exclamation mark warning), but if you check for the title, you should see that it was automatically set to 12, as we intended.

Adding a new visual

Ok, it worked like a charm for the existing visuals, but what will happen if I insert a brand new visual on my report canvas.

I’ve placed simple Card visual on the report and dragged my Sales Amount measure:

Roboto 12? Power BI – I love you:)

Potential caveats

That worked perfectly! However, there are some potential caveats and limitations to this, that you should be aware of. For example, if you want to apply specific custom font to titles only (all titles within your report), you should write something like:

{"name":"Data Mozart 2",
"visualStyles":{"*":{"*":{"title":[{"fontSize":18,"fontFamily":"Roboto","color":{"solid":{}}}]}}},
"dataColors":["#8BC7F7","#46B3F3","#009FEF","#008CEE","#0078ED","#0050EB","#0641C8","#0B31A5","#46647C","#235A7A","#005078","#004677","#003C77","#002876","#032164","#061953","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325"],
"tableAccent":"#8BC7F7","maximum":"#8BC7F7","center":"#0B31A5","minimum":"#D2D3D5"}

As you see, in “visualStyles” property, I’ve set Roboto font size 18 for all the titles in my report. And, if we go back to a Power BI report, you can see that this works just fine:

But…If you want to adjust “normal” labels, such as axis, data labels, category, etc…

There is no more Roboto in the Fonts drop down list! As we explicitly instructed Power BI that we want to use Roboto font for titles exclusively, this font will not be available for other visual elements.

One more important thing to keep in mind: if you manually change the font of the visual once you open your .pbix file, BEFORE importing the theme, and then import the theme, changes will not be applied! I don’t know if it is a bug or what, but let me show you what’s the issue:

So, be careful when playing with theme files, as there are obviously some caveats with their usage! The possible solution to this challenge could be: format everything as you like, save the .pbix file, open it, and immediately apply a customized theme! And then, don’t touch anything:)))

Conclusion

Like I said in the very beginning, I like the flexibility that Power BI gives you in order to present your data story in the most appealing way.

As you witnessed, we were able to extend the standard Power BI font library and use a custom font to enhance our report and satisfy the client’s needs.

On the other hand, keep your eyes open when applying adjustments via theme file – there are some obvious limitations (or bugs) that can bring confusion, and you should definitely be aware of them.

Thanks for reading!

Last Updated on January 17, 2021 by Nikola

Spread the music: