topic embed a font in custom visual in Developer

embed a font in custom visual

Anonymous — Tue, 17 Sep 2019 21:44:41 GMT

I am trying to use Bebas Neue for my custom visual. If a user's machine has Bebas Neue installed, everything looks fine. But if the user doesn't have Bebas Neue font installed, the whole visual went south (using default font).

I wonder if there is a way, say, using CSS to embed Bebas Neue font into my visual package? I tried this link, the 3rd answer, but I cannot get it work.

Any suggestions?

Thanks!

Re: embed a font in custom visual

dm-p — Wed, 18 Sep 2019 00:37:52 GMT

Hi @Anonymous,

There's definitely one way to do it, if you don't mind loading from a CDN. Here's an exmaple of loading a font in a custom visual I recently did for fun:

Here's the @font-face declaration in visual.less
Here's an example of how I apply the styling in the same file once declared

I'm going to attempt compiling a specific font into a new visual I'm working on but haven't got to it yet to be able to test.

I believe that (if this is possible) then you'll need to ensure that the webpack process includes your font when it builds the visual. I was going to start with this article to see if it could be done, falling back to the CDN approach if not. I'd love to hear how you get on if you give it a try!

Hopefully this may give you something to try either way.

Good luck!

Daniel

Re: embed a font in custom visual

jppp — Thu, 19 Sep 2019 07:29:26 GMT

Hi @Anonymous ,

You can easily use the CSS with the @font-face route with the font file (*.woff e.g.) as a base64 encoded string, like below:

@font-face {
  font-family: <FontName>
  src: url(data&colon;application/font-woff2;charset=utf-8;base64,<Base64String>) format("woff");
}

-JP

Re: embed a font in custom visual

Anonymous — Thu, 19 Sep 2019 14:31:48 GMT

@jppp

Where exactly should I put this piece of code and where should I put the font file?

thanks.

@jppp wrote:
Hi @Anonymous ,

You can easily use the CSS with the @font-face route with the font file (*.woff e.g.) as a base64 encoded string, like below:
@font-face {
  font-family: <FontName>
  src: url(data&colon;application/font-woff2;charset=utf-8;base64,<Base64String>) format("woff");
}
-JP

Re: embed a font in custom visual

jppp — Thu, 19 Sep 2019 15:15:48 GMT

Hi @Anonymous ,

The code snippet should be in the CSS file, preferable at the top.

And you only need your font file to generate a Base64 encoded string (eg via https://base64converter.com/) which you include in the CSS file.

-JP

Re: embed a font in custom visual

aparna-bh — Mon, 28 Nov 2022 13:51:56 GMT

We are using liferay to perform Power BI iframe embed. Tried importing the font using CDN. This doesn't seem to work . Any other suggestions? Please advise. Thank you