Forum Discussion
Power BI Custom Visuals development - Issue with font "DIN" for SVG
- 1 year ago
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
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
- OlivierH714 months agoRegular Visitor
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.