topic Re: Import custom local font? in Developer

Import custom local font?

karlsandin — Mon, 29 May 2017 08:02:05 GMT

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!

Re: Import custom local font?

v-chuncz-msft — Wed, 31 May 2017 09:29:17 GMT

@karlsandin,

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

Re: Import custom local font?

karlsandin — Wed, 31 May 2017 10:34:09 GMT

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

Re: Import custom local font?

v-chuncz-msft — Thu, 01 Jun 2017 04:50:09 GMT

@karlsandin,

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

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

Re: Import custom local font?

karlsandin — Thu, 01 Jun 2017 07:38:18 GMT

@v-chuncz-msft

Works like charm!

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

Re: Import custom local font?

lattys — Wed, 23 Aug 2017 09:58:14 GMT

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!

Re: Import custom local font?

karlsandin — Thu, 24 Aug 2017 12:36:59 GMT

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;
}

Re: Import custom local font?

lattys — Tue, 17 Oct 2017 15:24:19 GMT

Thank you very much! 🙂

Re: Import custom local font?

murali_r — Wed, 22 Nov 2017 17:02:25 GMT

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

Re: Import custom local font?

v-viig — Thu, 23 Nov 2017 06:55:32 GMT

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

Re: Import custom local font?

mblacher — Tue, 08 May 2018 18:52:22 GMT

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

Re: Import custom local font?

mblacher — Tue, 08 May 2018 18:55:22 GMT

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

Re: Import custom local font?

Friso — Wed, 22 Aug 2018 11:50:28 GMT

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

Re: Import custom local font?

v-viig — Fri, 24 Aug 2018 07:23:14 GMT

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