Forum Discussion
Custom font for Custom Visual
- 6 years ago
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
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.
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
- powerkriya6 years agoFrequent Visitor
Thanks dm-p