Power BI Custom Visuals development - Issue with font "DIN" for SVG

[Andrelele]

hello dear people,

in Power BI Custom Visuals I'm trying to develop a simple card visual. There I want to have the possibility to change the fonts of my elements in my SVG. I do this with the help of the FontControl inside my Custom Visual project file.

When I change the font to "DIN", the FontControl does not apply it to its element, instead uses something else. I looked up with the console.log on Power BI Webservice which value it uses instead of "DIN". And it shows "wf_standard-font, helvetica, arial, sans-serif" when I select "DIN" in my FontControl.

The FontControl has bold, italic, underline, fontSize and fontFamily as properties. As an alternative I tried to use the FontPicker but unfortunately had the same outcome as the FontControl.

I looked up several other posts in our Power BI Forums regarding to font, with no success for me.

• https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Custom-visual-development-issue...
• https://community.fabric.microsoft.com/t5/Desktop/Fontfamily-DIN-doesn-t-work-in-theme-json/m-p/1706...
• https://community.fabric.microsoft.com/t5/Desktop/Change-fontfamily-power-bi-report/td-p/562284
• https://community.fabric.microsoft.com/t5/Custom-Visuals-Development/Custom-visual-development-issue...

For a different approach I tried to make use of the Custom Themes of Power BI Desktop. With a .json I set the fontFamily globally to "DIN" and with "wf_standard-font, helvetica, arial, sans-serif" too. When I loaded my Custom Visual to Power BI Desktop, the results are the same as prior to my approach with FontControl/FontPicker.

Here are the links for the implementation of Custom Themes in Power BI:

• https://github.com/deldersveld/PowerBI-ThemeTemplates/blob/master/README.md
• https://dataveld.com/2018/01/05/control-and-expand-your-power-bi-font-selection-with-themes/
• https://community.fabric.microsoft.com/t5/Desktop/Theming-Usage-of-the-quot-Segoe-Bold-quot-font/td-...

 

Here are screenshots of my project as reference:

And for some reason in the format pane under General > Title, the font uses the correct "DIN" in contrast to my Visual > "Wert" with "DIN":

 

thanks in advance

 

[Andrelele]

Dear Daniel,

it worked in my project! Thank you very much.

Sincerely,

Andrelele

[dm-p · Accepted solution]

Hi @Andrelele,

For some reason, DIN or the underlying font is unavailable for custom visuals, but you can package it in your visual and reference it to provide some continuity. Here's an example of how I've solved the problem for the HTML Content visual, which involved:

• Adding the font file to my visual's CSS via a data URI.
• Creating aliases for the font face (so that either DIN or wf_standard-font works as a valid font-family. If you don't do this, using the underlying font-family you're trying in your OP should work fine, though.

Good luck,

Daniel

[OlivierH71]

We have ended up with the same solution.
Still, it is a strange behavior from the fontControl available in the settings to list a DIN entry and pass it as `vwf_standard-font, helvetica, arial, sans-serif` to custom visuals, while this font is not available to the visual sandbox and fallsback to a browser available fontFamily which DIN is not part of.
As far as Microsoft chose DIN as the default fontfamilly for number readability, they should inject the @FONT-face in the iFrame document of the custom visuals.
Currently, if you inspect the powerBi page document, it has 135 fonts available but 0 in the visual sandbox...
I have added an idea here:
Inject Power BI default fonts (@font-face) into cu... - Microsoft Fabric Community
It should take no more than 30 seconds to a Microsoft engineer to implement.