cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
optimusprime Regular Visitor
Regular Visitor

embed a font in custom visual

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!

4 REPLIES 4
dm-p Established Member
Established Member

Re: embed a font in custom visual

Hi @optimusprime,

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:

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

jppp
Advisor

Re: embed a font in custom visual

Hi @optimusprime ,

 

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
optimusprime Regular Visitor
Regular Visitor

Re: embed a font in custom visual

@jppp 

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

thanks.

 


@jppp wrote:

Hi @optimusprime ,

 

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

 

jppp
Advisor

Re: embed a font in custom visual

Hi @optimusprime ,

 

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

Helpful resources

Announcements
Can You Solve These Challenge

Challenge: Can You Solve These?

Find out how to participate in the first Power BI 'Can You Solve These?' challenge.

New Badges

Incoming: New and Improved Badges

Exciting news: We've given our badges an overhaul and added brand news ones.

Ask Amir Anything

Exclusive LIVE Community Event No. 2 – Ask Amir Anything

Next in our Triple A series: Ask Amir Netz questions about the latest updates, features and future.

Analytics in Azure virtual event

Analytics in Azure virtual event

Experience a limitless analytics service built to ingest, prep, manage, and serve data for immediate use in Power BI.

Users Online
Currently online: 271 members 2,874 guests
Please welcome our newest community members: