cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
karlsandin Frequent Visitor
Frequent 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

Accepted Solutions
Community Support Team
Community Support Team

Re: Import custom local font?

@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.
13 REPLIES 13
Community Support Team
Community Support Team

Re: Import custom local font?

@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.
Highlighted
karlsandin Frequent Visitor
Frequent Visitor

Re: Import custom local font?

@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?

Community Support Team
Community Support Team

Re: Import custom local font?

@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.
karlsandin Frequent Visitor
Frequent Visitor

Re: Import custom local font?

@v-chuncz-msft

 

Works like charm!

 

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

lattys Frequent Visitor
Frequent Visitor

Re: Import custom local font?

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!

karlsandin Frequent Visitor
Frequent Visitor

Re: Import custom local font?

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;
}
lattys Frequent Visitor
Frequent Visitor

Re: Import custom local font?

Thank you very much! Smiley Happy 

murali_r Regular Visitor
Regular Visitor

Re: Import custom local font?

@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.

 

Moderator v-viig
Moderator

Re: Import custom local font?

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