Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Qlik® Product Spotlight: Discover what’s possible. Get more from our products.
See for yourself. Register today.
Not applicable

How to change font style in Qlik Sense?

Hello!

Can anybody please tell me how to change font styles in Qlik Sense for Charts? E.g. I want to change the font styles for titles, Dimensions, and Measure values. How can I do that?

16 Replies
Not applicable

Re: How to change font style in Qlik Sense?

Hi -

I don't think it is possible unless at this point. The only thing you can do is to remove titles and increase the size of table, chart. It is only possible when you create a story.

Thanks

ogunadsay
Not applicable

Re: How to change font style in Qlik Sense?

Hey,

It's been a while since this topic opened. But I wanted to reply it anyway.You can't change just dimensions or measures or charts font style. You can change all font style in the app screen. If you're on the server follow C:\Program Files\Qlik\Sense\Client\assets\client\client.css. You can see what is the site's css file using developer tools with the browser you're using.

Best regards,

Ogün ADSAY.

EmmaC
Not applicable

Re: How to change font style in Qlik Sense?

hi!

I tried changing the file C:\Program Files\Qlik\Sense\Client\assets\client\client.css, still getting "QlikView Sans".

I am also getting a link to the file qlik-styles.css using the browser's inspector. Anyone could change the font already???



best regards,

Emma

EmmaC
Not applicable

Re: How to change font style in Qlik Sense?

Hi! I edited both the client.css and the qlik-style.css and IT WORKS! I could change the font!!!

regards,

jim_chan
Not applicable

Re: How to change font style in Qlik Sense?

Thats Great. Emma! I am new with Qlik Sense. If its in the Qlik Sense Server, what would be the path directory to all look for  client.css and qlik-style.css ?

Rgds

Jim

EmmaC
Not applicable

Re: How to change font style in Qlik Sense?

Hi Jim,

C:\Program Files\Qlik\Sense\Client\autogenerated\qlik-styles.css

C:\Program Files\Qlik\Sense\Client\assets\client\client.css


the new fonts should be placed in:


C:\Program Files\Qlik\Sense\Client\fonts\


And the fonts should be Installable otherwise you'll get errors when opening your mashup in some browsers

(https://technet.microsoft.com/en-us/library/cc958234.aspx)


Installable fonts.png


hope this helps!

regards, Emma


naveenbalanagu
Not applicable

Re: How to change font style in Qlik Sense?

Thanks Emma. This is helpful.

I applied the changes in both the CSS files. The new font is applied only for the title/sub title/footnote etc. But it did not change the visual font style (bar chart x and y axes). Is there a way to change in all places of the visuals?

EmmaC
Not applicable

Re: How to change font style in Qlik Sense?

Hi! I am glad it helped a bit!

You can try editing the following file:

C:\Program Files\Qlik\Sense\Client\assets\external\requirejs\require.js


I edited this one mainly for the colors, but you can try to edit the font there!


regards, Emma

naveenbalanagu
Not applicable

Re: How to change font style in Qlik Sense?

Perfect,it worked. Thank you for your quick response on this .This is what exactly I am looking for.

I am new to QlikSense, so I am just curious to know what will happen to the changes done to the fonts when we upgrade QlikSense to a new version? Will it replace with native QlikView-Sans font? If so, after upgrade we need to modify the files again.

And also the other question I have is, modifying these CSS/JS files will void license agreement with Qlik in any way as we are modifying the content outside of what is available in QlikSense/QMC (as this is not a feature available within Qlik Sense)?

I tried adding the font information (see below) in the mash up CSS file but it did change the font only in few places.

@font-face {

    font-family: 'Proxima Nova Rg';

    src: url('ProximaNova-Reg-webfont.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

.qv-object *{

  font-family: 'Proxima Nova Rg';

}