Forum Discussion
Fonts in custom visuals
I'd like to use the same font being used for the callout value on the gauge chart. In the browser inspector, it's reported as being 'wf_standard-font_light'. I've tried simply setting that font in visual.less, but that font family doesn't appear to be available from my custom visual's iframe.
What is the best way to make this font available for use in my custom visual? Is there a common style sheet I should be referencing?
5 Replies
I've been looking into this and discovered a way to use custom font files in custom visuals.
So for your need of the "wf_standard-font_light" font, you would get the font using developer tools on some browser (I used firefox):
and download the woff file listed (you can also use the css associated for your css), then you will take that file and encode it to base64 using a site like this. And create a css font-face rule in your .less file, but replacing the src url with this:
src: url("<output of base64 encoder>") format("woff");
Then you will be able to use the font-face and it should work correctly. I know this is a dirty method, but it's the only way I could work around the sandbox and not letting you include woff (etc.) files in the build process.
We wouldn't recommend such method since this font is private and we don't have any plans to share it.
Our recommendation is to use free fonts instead.Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
- I would certainly take into account licensing before implementing this outside of a purely informational exercise. I should have made that clear in my previous post. What is Microsoft's stance on using a font built into Power BI with a custom visual displayed only in Power BI? Why do custom visuals not have access to the styling that built-in visuals have in the first place?
Hello joshberry,
Thanks for your feedback.
The wf_standard-font_light isn't available for custom visuals now. There's no way use this font with custom visuals at least now.
However, you are able to use other public fonts.
Ignat Vilesov,
Software Engineer
Microsoft Power BI Custom Visuals
