Forum Discussion
Custom font for Custom Visual
How to add Helvetica font to the custom visual fontFamily custom properties?
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
6 Replies
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
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.
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
