Custom font for Custom Visual

[powerkriya]

How to add Helvetica font to the custom visual fontFamily custom properties?

[dm-p]

Hi @powerkriya,

It's not clear from your question how you are defining this, so I'm assuming that you already have a property set up for this that uses the default font picker, e.g.:

"fontFamily": {
    "displayName": "Font Family",
    "type": {
        "formatting": {
            "fontFamily": true
        }
    }
}

This is the standard list of fonts across Power BI and cannot be added to.

If you want a picker with additional or custom fonts in there, then you will unfortunately need to define it as an enumeration type yourself. To save you some time I've set up a Gist that you can copy/paste/amend and I've added Helvetica to it for you. Note that you can define fallback fonts, just like CSS and I've defined Arial as this in the linked code.

If this isn't what you were meaning, please provide some more context around how you are looking to implement (possibly with some sample code and capabilities and I can take a more detailed look.

Regards,

Daniel

[powerkriya]

Hi @dm-p 

Thanks again for helping.  

You are correct, Iam already having a property setup for the font that uses the default font picker which does not contain the Helvetica font.

After adding your code to the capabilities.json, I got the list of fonts with Helvetica in that. Which is good. 

But I don't see the font output as Helvetica and i believe the fallback font Arial is being applied.  Not sure why.

[dm-p]

Hi @powerkriya - do you have the Helvetica font installed? You haven't specified which OS you're using but if it's Windows, you won't have this available by default, unless you've purchased its license commercially. If you're on a Mac then it should be bundled in with the OS.

If you have the font installed, then this should work as per regular CSS - unfortunately I don't have a license for it to test this myself. However if you're happy yo share it, I can review your code if you do have the font installed and it's still not working for you, just to see if there's anything else that jumps out.

One other thing to try if you don't have the font installed locally but have access to it from a remote endpoint, you can add it to your visual's CSS using a @font-face declaration, e.g.:

@font-face {
    font-family: "Helvetica";
    src: url('[my font CDN URL]');
}

...or base64 encode your font file and add it to your CSS as explained in this answer.

This mught provide a couple of other options, but I think that ultimately if you don't have a licensed copy of the font then it may not work for you.

Regards,

Daniel

[powerkriya]

Thanks a lot for all the inputs about customizing the font on the visual.  This is really super helpful. 

From your inputs, I understand why it's not working. I don't have the Helvetica font installed on my Windows machine. Does your answer for the enum method applies to power bi service?

Test 1: For testing purposes, I downloaded and installed some random font called "Honey Hear Regular" on my machine and I tested this enumeration code and its working fine on the Power BI desktop.  

Settings.ts

export class CircleSettings {
  public circleColor: string = "gold";
  public circleThickness: number = 2;
  public fontSize: number = 20;
  public fontFamily: string = "Honey Bear Regular, Symbol";
}

Capabilities.json

"fontFamily": {
    "displayName": "Font Family",
    "type": {
        "enumeration": [
            {
                "displayName": "Honey Bear Regular",
                "value": "Honey Bear Regular"
            }]
    }
}

Test 2: One other thing which I tried is, I mentioned "Honey Bear Regular" as the default font in the settings.ts code and I see that added to the default list (as in the screenshot below).  I tested this code and its working fine on the Power BI desktop and if I uninstall this font it fallbacks to Symbol font as I mentioned which is good. 

settings.ts

export class CircleSettings {
  public circleColor: string = "gold";
  public circleThickness: number = 2;
  public fontSize: number = 20;
  public fontFamily: string = "Honey Bear Regular, Symbol";
}

capabilities.json

"fontFamily": {
    "displayName": "Font Family",
    "type": {
        "formatting": {
            "fontFamily": true
        }
    }
}

On both these methods, when I tested the custom visual on the power bi service it does not seems to be working even when I have the font installed on my machine. Should I really go for embedding the font using CDN URL to make the font work on power bi service?

Not sure when I publish to the on-prem report server and if user access from a remote machine (I didn't test yet). In this case, I believe the above two methods should work if I have the font installed on the report server right?  I tested it on the on-prem server itself it's working fine. 

Again I really appreciate your time and effort to the Power BI community.

[dm-p · Accepted solution]

I can't easily diagnose the issues you're experiencing with installed fonts for Desktop vs. Service - this might vary from browser to browser, and it's possible that your browser might only load font lists on startup, so if you've not tried it, it might be worth killing all sessions, installing the font and the re-open your borwser and load the visualto see if it works.

I personally think that if you're relying on a font that a user may or may not have installed on their own system, you'll get inconsistent results anyway, so you can either handle this with a fallback font, or use the @font-face approach so that all end-users get a consistent experience.

This custom visual has a particularly stylised font that most people definitely won't have installed, and uses the CDN approach (you can see it in the style declarations). It has been tested in both Desktop and the Service and works fine - another user even did a data story with it, or you could refer to the sample workbook (which are both hosted via publish to web) to see how the fonts come out for you in your browser. Hopefully this might help you out.

Regards,

Daniel

[powerkriya]

Thanks @dm-p