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

Import custom local font?

I am trying to import a local font but I keep on getting a console error:

 

"@font-face failed cross-origin request. Resource access is restricted."

 

Is it possible at all to import a custom font for custom visualizations?

 

Thanks in advance!

1 ACCEPTED SOLUTION
v-chuncz-msft
Community Support
Community Support

@karlsandin,

 

Google "Access-Control-Allow-Origin" to learn more about this issue. Instead, you may use Google Fonts.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

13 REPLIES 13
v-chuncz-msft
Community Support
Community Support

@karlsandin,

 

Google "Access-Control-Allow-Origin" to learn more about this issue. Instead, you may use Google Fonts.

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

@v-chuncz-msft

 

Thanks for the answer!

 

I tried using Google fonts and using:

 

"@import url('https://fonts.googleapis.com/css?family=Lato')"

 

in my visual.less.

 

But it keeps on fallbacking to the original fonts (Arial etc)...

 

Any idea how to fix this?

@karlsandin,

 

Based on my test, you need to import it as .less file.

@import (less) url('https://fonts.googleapis.com/css?family=Lato');
Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

@v-chuncz-msft

 

Works like charm!

 

Thanks alot for taking the time to help me with this, very much appreciated!

Hello karlsandin!

 

How did you import fonts or where/on wich platform ?  

I would like to import the "roboto" family in my power bi desktop, which I will be publishing to the web (refresh through cloud). Thank you for your answer!

Hi lattys!

 

I used the following line to import a google font into my project, placing it first in my visual.less file:

 

@import (less) url('https://fonts.googleapis.com/css?family=Lato');

 

 This works in both web and desktop version of Power BI

 

In your case it would look something like:

@import (less) url('https://fonts.googleapis.com/css?family=Roboto');

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

In what part of Power BI Desktop should I put the code?

In what part of Power BI Desktop should I put the code?

@karlsandin

 

Hi I am also face same issue (import roboto font) in power BI Desktop . I have only .pbix file . In this how do I generate and import this visual.less file . Please help me in details because I am new to this.

 

v-viig
Community Champion
Community Champion

Hello @murali_r

 

You can import custom fonts to your own custom visuals by using the solution above.

However, you can't import custom fonts and apply them to Power BI Desktop and other visuals w/o some code modifications.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Friso
Frequent Visitor

Hello, 

 

How and where can I import the code beneath? 

And is it not possible yet to use is alwasy (one import or for each visual a seperate import?) 

 

@import (less) url('https://fonts.googleapis.com/css?family=Roboto');

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

 Friso

v-viig
Community Champion
Community Champion

Please write a valid CSS code to import Roboto Font from Google's servers.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Thank you very much! 🙂 

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