cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
inserv
Regular Visitor

Custom visual development - issue rendering font "DIN"

Hi All.
We have an issue with rendering DIN font in our custom visual.

Issue: DIN font rendered by our custom visual do not match the same font
(with same color, size...) by built-in card visual.

Code:
private eleDinTest: d3.Selection<SVGElement>;
...
this.eleDinTest
     .text("Test DIN")
     .style("font-size", 20 + "pt") // or .style("font-size", 20 + "px")
     .style("font-family", "DIN")
     .style("font-weight", "Normal")
     .style("fill", "#000000");

 

Any additional style and/or attribute settings required?
Any help is much appreciated.
Thanks in advance.

1 ACCEPTED SOLUTION

Hi,

 

1. The latest API supports standard definition of Font list

FontFamily.PNG

However it will add all the possible fonts for Power BI (including these that don't work in sandbox).

However, font list may be defined manually as any enumeration in capabilities.json

Unfortunately, I am unfamiliar with all non-working in sandbox fonts, only DIN, but there may be couple of others.

Honestly, I don't recommend to define them manually because I have discussed this question with persons who is in charge of this question and there is a chance that these fonts may be supported in sandbox in the future.

Also, visuals may work in different modes so, it is better to leave this fonts as is.

 

2. Font size is defined in 'pt' (if it described correctly in capabilities.json)

FontSize.PNG

However, inside visual it may be transformed into 'px' by the code (if developer decided, but original size storing in 'pt' anyway)

ptConverter.PNG

 

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

View solution in original post

9 REPLIES 9
dm-p
Super User I
Super User I

Hi @inserv,

From inspecting the card visual with the default properties set (DIN is the font in the dropdown), the following style attributes are set:

{
    text-anchor: middle;
    fill: rgb(51, 51, 51);
    font-family: wf_standard-font, helvetica, arial, sans-serif;
    font-size: 36px;
    font-weight: normal;
}

I'd suggest trying swapping out your appropriate .style function as follows:

.style("font-family", "wf_standard-font, helvetica, arial, sans-serif")

I've had trouble getting some fonts to render as per other visuals - Segoe (Bold) is one such example, but this one seems to work.

Here's a quickly-produced custom visual with your code (swapped out with the suggested change for font-family), compared to a card visual:

image.png

Hopefully this should be all you need.

Good luck!

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




inserv
Regular Visitor

Hi Daniel,
Thanks you so much for your time and help.

With the suggested font family setting, font is closer to matching with built-in card visual.
Still there is a difference in size.
Below shows comparison of fonts.

DINSize.png

 

 

Left side shows custom visual font with font family set as "wf_standard-font, helvetica, arial, sans-serif"
and size set as 26px. Right side show custom visual font size set as 26pt and fill color as #000000 for both.

With built-in card following settings are used.
Card Title set as "Sales YTD":
Font family: DIN
Font Color: Black (#000000)
Background color: No fill
Text Size: 26 pt

As the solution is working on your end, we are verifying our custom visual code, to see any other settings causing this issue.

Incase you have any other suggession, please let us know.

Thank you. Appreciate your help and time.

 

Hello,

 

If your visual works in Sandbox mode, DIN font will not be applied so, there will be applied the next font from the font-family sequence.

DIN font is non-public font and defined out of the sandbox therefore, it works only for core and no-iframe visuals.

 

Kind Regards,

 

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

inserv
Regular Visitor

Hi Evgenii Elkin,
Thank you for your response, time and help.
Sorry for delay in our response.

Couple of our visuals are live on app store. We have DIN as value for the font DIN.
We are trying to test suggession from Daniel.

 

Appreciate if you can share your thoughts on following.
(Due apologies in case the questions are out of your boundary.)

1. It would be helpful to know name/value (Name & value specified in capabilities.json) for all fonts supported by PBI.
In case you have the list, can you please share it?
Also if the list notes non-public fonts, we will exclude from our custom visuals for time being.

 

2. Do you happen to know how font size be specified - px or pt, across PBI visuals?
I believe there was a bug noted on the font size and was being addressed.
Related reference link:
https://community.powerbi.com/t5/Issues/Font-size-not-consistent-across-visuals/idi-p/581490

 

Appreciate your help and time.
Thanks.

Hi,

 

1. The latest API supports standard definition of Font list

FontFamily.PNG

However it will add all the possible fonts for Power BI (including these that don't work in sandbox).

However, font list may be defined manually as any enumeration in capabilities.json

Unfortunately, I am unfamiliar with all non-working in sandbox fonts, only DIN, but there may be couple of others.

Honestly, I don't recommend to define them manually because I have discussed this question with persons who is in charge of this question and there is a chance that these fonts may be supported in sandbox in the future.

Also, visuals may work in different modes so, it is better to leave this fonts as is.

 

2. Font size is defined in 'pt' (if it described correctly in capabilities.json)

FontSize.PNG

However, inside visual it may be transformed into 'px' by the code (if developer decided, but original size storing in 'pt' anyway)

ptConverter.PNG

 

Kind Regards,

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

View solution in original post

inserv
Regular Visitor

Hi Evgenii Elkin,

  Thanks so much for response and providing details.

We will try to upgrade our visual to latest version.

 

Appreciate your help and time.

Thanks.

Hi @inserv,

Here's the code I used - I just took yours and added the styling in from inspecting the element in the browser as per my screenshot above, although I modified the font based on the value in the properties pane:

this.eleDinTest
    .text("Test DIN")
    .style("font-size", "27pt") // or .style("font-size", 20 + "px")
    .style("font-family", "wf_standard-font, helvetica, arial, sans-serif")
    .style("font-weight", "normal")
    .style("fill", "rgb(51, 51, 51)");

Two additional things that might help:

  • Note that normal for font-weight is a lower-case 'n'. Your example uses upper-case, which CSS will ignore.
  • If you're using 'pt' vs. 'px' when comparing, your CSS unit of measurement will have a difference. If you're using a visual property as reference, the core ones all use 'pt' now, so I'd suggest replacing your code to match that.

I'm hoping that should be it. If not, feel free to post your updated code and I'll take another look for you.

Cheers,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




inserv
Regular Visitor

Hi Daniel,
Thank you so much for quick response.
Sorry for delay in our response.

We tested with a new pbiviz project.The problem still persists.
Just to keep it simple, we changed code in constructor() as noted and removed code from update().

Still size rendered do not match PBI card visual.

***Code****
constructor(options: VisualConstructorOptions) {
this.target = options.element;
if (typeof document !== "undefined") {
const new_p: HTMLElement = document.createElement("p");
new_p.appendChild(document.createTextNode("Sales YTD"));
new_p.style.fontSize = "26px";
new_p.style.fontFamily = "wf_standard-font, helvetica, arial, sans-serif";
new_p.style.fill = "#000000";
new_p.style.fontWeight = "normal";
this.target.appendChild(new_p);
}
}
public update(options: VisualUpdateOptions) {

}

**********

As always, appreciate your help and time.
Thanks.

 

inserv
Regular Visitor

Hi Daniel,

   Thanks for all your help and time.

We will try to upgrade our visual(s) to latest API version.

We shall try your suggession till we upgrade.

Thanks and Best regards.

Helpful resources

Announcements
MBAS on Demand

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

July 2021 Update 768x460.png

Check it out!

Click here to read more about the July 2021 Updates

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Top Solution Authors