[BUG] Unable to use Segoe (Bold) or DIN about powerbi-visuals-html-content

[dm-p]

The Segoe family behaviour inside custom visuals is pretty weird. Segoe UI Bold and Segoe UI Semibold are not named font families available to the visual sandbox, so naming them as per the font property dropdowns doesn't work the same. You would need to apply the appropriate font-weight to them within a custom visual. The following will work:

Segoe UI Bold

Measure = 
    VAR CSS = "
            <style>
                .test {
                    font-family: ""Segoe UI"", helvetica, arial, sans-serif;
                    font-weight: bold;
                    font-size: 40px;
                    color: #ADCDE9;
                }
                
            </style>"

RETURN
CSS&
"<span class='test'>My Test</span>"

Segoe UI Semibold

Measure = 
    VAR CSS = "
            <style>
                .test {
                    font-family: ""Segoe UI"", helvetica, arial, sans-serif;
                    font-weight: 600;
                    font-size: 40px;
                    color: #ADCDE9;
                }
                
            </style>"

RETURN
CSS&
"<span class='test'>My Test</span>"

---

DIN isn't passed to the visual sandbox as a valid font. In Deneb we have actually packaged the DIN font as a base64 asset that we can load and therefore access. TBH I'm surprised I haven't done this with HTML Content. I'm not currently planning any more releases, but I can try to find some time to do a minor release with these changes.

[PBI-David]

Can I reopen this as a reminder to package DIN in the next release? This visual is useful for building KPIs and DIN is a standard font for that. Thanks

[dm-p]

I have to submit a bug fix release for iframes not working, so I'll add DIN to this build as well before I submit.

[dm-p]

1.4.1 has been submitted to AppSource. When this goes live, you will be able to specify either din or wf_standard-font as a font family to use DIN inside the visual.

html-content-issue-95-resolution.mp4

[PBI-David]

Thanks Daniel. Just an FYI, that applying a font-weight of bold to Segoe UI does not render the same as Segoe (Bold). They're different fonts. Segoe (Bold) is a lot more elegant looking as you can see below. I also seem to get different results to you. 2 and 3 below look identical to me.

1. Standard text box Segoe (Bold) 32

2. .test {
   font-family: ""Segoe UI"", helvetica, arial, sans-serif;
   font-weight: bold;
   font-size: 40px;
   color: #ADCDE9;
   }

3. .test {
   font-family: ""Segoe UI"", helvetica, arial, sans-serif;
   font-weight: 600;
   font-size: 40px;
   color: #ADCDE9;
   }

Font Test.pbix,zip

[dm-p]

In June 2019, MS standardised font size to points rather than pixels, which will be a contributing reason for why they look inconsistent here.

Here's a text box with Segoe (Bold) 32pt (top), and then HTML Content with the title styled the same (Segoe UI Bold, 32). The title is outside the sandbox, so should be the same as the text box. Underneath the title divider is the HTML Content body, with the measure as configured previously, but modified to 32pt for font-size.

For transparency, measure is as follows:

Measure = 
    VAR CSS = "
            <style>
                .test {
                    font-family: ""Segoe UI"", helvetica, arial, sans-serif;
                    font-weight: 700;
                    font-size: 32pt;
                    color: #000;
                }
                
            </style>"

RETURN
CSS&
"<span class='test'>My Test</span>"

This is HTML Content 1.4 (AppSource version) inside Power BI Desktop (Aug 2023)

As far as I can tell, these look the same across all three instances, although I wear glasses and am approaching middle age ;)

Unfortunately, MS doesn't provide Segoe UI Semibold in the text box as an option, so I can't repeat the test fully, but here's the title and body test repeated:

Modifying your workbook with the font size changes also looks right (to me):

...but have attached for your reference.

Font.Test.pbix.zip

If you see differences between the text box and visual title, this is an MS issue. Anything that applies to the visual container is not available to visual developers and Power BI takes care of it.

If HTML Content's body looks different to its title, then we will need to have a look at potentially embedding those fonts, although MS doesn't permit them to be converted for embedding, so I'll have to progress this with them somehow.

[PBI-David]

How bizarre - I still don't see what you see. I have tested on two completely different machines and I get consistent results on both.

The image above still has different fonts and I checked on two machines.

1. is the text box
   

2. is the HTML 1.4 with a title and html content which should all look identical. The title is identical to the text box but the html still renders much chunkier

Measure2 = 
    VAR CSS = "
            <style>
                .test {
                    font-family: ""Segoe UI"", helvetica, arial, sans-serif;
                    font-weight: 700;
                    font-size: 32pt;
                    color: #ADCDE9;
                }
                
            </style>"

RETURN
CSS&
"<span class='test'>Here is a test</span>"

Opening your workbook with zero modifications shows me this:

The service shows me the same.

[PBI-David]

To be super explicit:

This title is Segoe UI with a bold modifier and renders the same as the HTML content (quite chunky)

This title is Segoe UI Bold (no bold modifier) and renders much thinner than the HTML content

I think Segoe UI Bold is its font that may need to be packaged with DIN although I can't explain why you see something different with the exact same code.

[dm-p]

Here's how it looks like the Service for me:

I've tried this on 2 different machines (both on Win 11), 2 different versions of Power BI Desktop, 3 different tenants and both AppSource editions of HTML Content (regular and certified), just to be sure.

At this point, I'm genuinely stumped, so we may need more information to come through before I can progress any further.

[PBI-David]

Thanks for checking. It is bizarre that we're seeing different things but I agree without more information then nothing can be done from your side. I'll close for now and reopen if anything else occurs to me.