Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Be one of the first to start using Fabric Databases. View on-demand sessions with database experts and the Microsoft product team to learn just how easy it is to get started. Watch now

Reply
smpa01
Super User
Super User

Importing Google fonts /using Google Fonts in cust Viz dev

‎04-05-2023 12:37 PM

Is there any way to use Google fonts in custViz.

 

I am developing the custViz using powerbi-visuals-api and I am very keen to find out if this is a possibility.

 

In a classic html set up, this is what I do

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
    </style>
    <div id="sandbox-div"></div>
    <script src="prod.js"></script>
  </body>
</html>

 

 

@dm-p 

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 1 of 5
1,580 Views
0
1 ACCEPTED SOLUTION
dm-p
Super User
Super User
In response to smpa01

‎04-12-2023 08:43 PM

Hi @smpa01,

 

Assumning that you've added https://fonts.gstatic.com to your visual's privileges for web access and it's still being refused, the Google domains may be imposing further cross domain issues against the custom visual sandboxing from their end.

 

However, if you're OK with bundling the font as part of your visual, then this will be possible.

 

With Deneb I've loaded the DIN font (as this doesn't seem to be available to custom visuals) as a base64 URL into my visual.less and this gets packaged and works inside the visual. You can see an example of how I set this up here.

 

If you're using a custom webpack configuration and have an appropriate loader, you may just be able to load the font using a relative URL in your source (I don't use powerbi-visuals-webpack-plugin as it never seems to be reliable enough for me and it defintiely doesn't work using powerbi-visuals-tools as-is).

 

Anyway, this may give you a way to achieve what you want, even if not as you were intending originally.

 

Regards,

 

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)




View solution in original post

Message 4 of 5
1,379 Views
4 REPLIES 4
smpa01
Super User
Super User

‎04-07-2023 08:11 AM

I am trying the following in .less file

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');

*{
    font-family: 'Roboto', sans-serif;
}

and I am running into this error in the built

smpa01_0-1680880196510.png

 

@v-viig @v-evelk @nikitagrachev 

 

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 2 of 5
1,478 Views
0
smpa01
Super User
Super User
In response to smpa01

‎04-12-2023 07:56 PM

The same build completes in a different pc (one that does not generate a self signed certificate error) with the same css declaration for a gogole font. But I see this

 

smpa01_0-1681354281175.png

Refused to load the font 'https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgWxP.ttf' because it violates the following Content Security Policy directive: "default-src https://app.powerbi.com data: blob: 'unsafe-inline' 'unsafe-eval'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Can someone pls confirm if google fonts are restricted altogether in custViz. If yes, I don't want to waste time and  I will try to make use of the fonts that are available. If no, what do I do from here to bypass that? I have a req where gFont can be utilized for visual asthetics unless this is entirely restricted.

 

@v-viig @v-evelk @nikitagrachev 

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 3 of 5
1,388 Views
0
dm-p
Super User
Super User
In response to smpa01

‎04-12-2023 08:43 PM

Hi @smpa01,

 

Assumning that you've added https://fonts.gstatic.com to your visual's privileges for web access and it's still being refused, the Google domains may be imposing further cross domain issues against the custom visual sandboxing from their end.

 

However, if you're OK with bundling the font as part of your visual, then this will be possible.

 

With Deneb I've loaded the DIN font (as this doesn't seem to be available to custom visuals) as a base64 URL into my visual.less and this gets packaged and works inside the visual. You can see an example of how I set this up here.

 

If you're using a custom webpack configuration and have an appropriate loader, you may just be able to load the font using a relative URL in your source (I don't use powerbi-visuals-webpack-plugin as it never seems to be reliable enough for me and it defintiely doesn't work using powerbi-visuals-tools as-is).

 

Anyway, this may give you a way to achieve what you want, even if not as you were intending originally.

 

Regards,

 

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)




Message 4 of 5
1,380 Views
smpa01
Super User
Super User
In response to dm-p

‎04-13-2023 05:44 AM

@dm-p  thanks for the response.

 

Assumning that you've added https://fonts.gstatic.com to your visual's privileges for web access _ No, I did not do that cause I don't know how to do that explicitly. If you can please let me know how to do that, would be great.

 

However, if you're OK with bundling the font as part of your visual, then this will be possible - I also did not know that gFonts can be bundled as part of the viz and I tried this. You made my day !!!!

 

getComputedStyle(document.querySelector('#sandbox-host > p')).font
//returns as desired

 

smpa01_0-1681393096177.png

 

 

 

Can't thank you enough for this TBH.

Web is so mysterious.

 

Did I answer your question? Mark my post as a solution!
Proud to be a Super User!
My custom visualization projects
Plotting Live Sound: Viz1
Beautiful News:Viz1, Viz2, Viz3
Visual Capitalist: Working Hrs
Message 5 of 5
1,347 Views
0

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Dec Fabric Community Survey

We want your feedback!

Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions.

ArunFabCon

Microsoft Fabric Community Conference 2025

Arun Ulag shares exciting details about the Microsoft Fabric Conference 2025, which will be held in Las Vegas, NV.

December 2024

A Year in Review - December 2024

Find out what content was popular in the Fabric community during 2024.

View All
Top Kudoed Authors
View All