Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

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!

5 REPLIES 5
aparna-bh
Frequent Visitor

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

jppp
MVP

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
Anonymous
Not applicable

@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

 

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

dm-p
Super User
Super User

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:

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors