Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

One of the topics we always cover in our data visualization training courses is the font family selection within your app. With the increasing number of devices and platforms accessing to your QlikView apps, details such as font size and type have become in a very important piece of the app success.

As a rule of thumb our recommendation is to keep your app as simple as possible, meaning using Arial or any other font that work well across devices. It’s important to note that fonts such as Tahoma or MS Calibri will force those devices that don’t come with those fonts installed, to pick an alternative font based on the font family. That may cause your app to be unreadable and/or blurry in some situations.

But let’s say you really need to use a non-standard typeface to customize one of your apps. Is that doable with QlikView?

The answer is yes, you can customize QlikView apps based on your needs and use an external font from Google or any other font servers.

To do so you will need to install and customize a document extension – you can download it at the bottom of this post - and then follow the next steps:

1. Search or browse font families at google.com/fonts you want to use in your QV app For this example, I’m going to pick the Abel font for my project, one of the many open source fonts hosted at google.com/fonts. You could choose a different provider or just host the font file on your own server.

google.png

2. Once you have chosen your font, grab a copy of the font file and install it on the computer where you are developing your app and in the machine(s) that host the QlikView Server(s). This is especially important: you must install the font on the QV server host machine if you want your charts to be rendered using the selected font.

3. Open your QlikView app with QlikView Desktop and modify the font as usual:

step3.png

step3-2.png

4. Once we are done applying your font across all the app objects it’s the time to review the document extension.

5. Download the extension attached at the bottom of this post, rename the file from ExtensionName.qar to ExtensionName.zip and unzip it.

A document extension will include at least 2 files, Definition.XML and Script.js.

The JS file will look like the example below where Abel is the font I chosen.

Qva.AddDocumentExtension('customfonts', function(){

           //Load a CSS style sheet

     Qva.LoadCSS("http://fonts.googleapis.com/css?family=Abel");

           });

Edit Script.js file and modify it to include your chosen font name as in the example above.

Compress the 2 files into a zip file and then rename it as ExtensionName.qar

6. Install the document extension in your environment.

    More info on how to do it here: http://www.qlikblog.at/1597/qliktip-40-installingdeploying-qlikview-extensions/

7. Go back to QlikView and activate the document extension in the app:

step7.png

From now on when the page loads, QlikView will include the extension and the font will be loaded across devices.

8. Publish your app to the server and enjoy your custom fonts in any device.

As a general recommendation you should stick to one of the 'standard' fonts such as Arial but in the case of you trying something new, following the described 8 steps you should be able to deploy a QV app to a server with a non-standard font on it.

PROS: Wide range of font styles to choose from, easy app customization, web standard fonts, works well across any device.

CONS: Web only, small impact on page load time.

Enjoy Qliking!

Arturo

62 Comments
Not applicable

Great little tutorial and thanks.

2,535 Views
Luminary
Luminary

What about doing this in Sense?

2,535 Views
Employee
Employee

Qlik Sense ships with a browser-safe font that looks gorgeous across devices. In the event of needing a new custom font, Qlik Sense will provide you with the tools to do it such as app templates themes, and yes we will also be able to extend it. So far that's all I've got

0 Likes
2,535 Views
male_carrasco
Contributor

Justo lo que estaba necesitando!!!!

thanks for the post!!!

2,535 Views
satyadev_j
Valued Contributor

Well articulated. Thanks for sharing.

2,535 Views
Employee
Employee

Genial que te sirva Alejandra!

0 Likes
2,535 Views
Employee
Employee

Guys, would be great if you could share a screenshot of one of your apps customized with a new font on it, I'm curious to see what you can came up with.

0 Likes
2,535 Views
Not applicable

Here are some examples I made myself. The use of specific fonts really helps creating a better environment for the app. It was a world cup app with some very basic info:

pic1.png

Some teams:

pic2.png

pic3.png

Greetings from Argentina.

2,535 Views
Employee
Employee

Hey Torben,

Yes there will be themes for Sense Server, if the same functionality will be available in Desktop I'm not sure of.

Here is an example of running Sense in Comic Sans (Don't do that please )

comicsans.PNG.png

2,535 Views
Not applicable

Great! As usual...

2,535 Views
Employee
Employee

Thanks Alex, but Comic Sans?

0 Likes
2,535 Views
Employee
Employee

Comic Sans, the king of typefaces! I can also recommend Comic Neue Get Comic Neue

0 Likes
2,535 Views
Not applicable

Great article - thanks heaps for this - I'm a font/typeface lover from way back and this was bugging me!

I also found that using the same and just separating the font families in the js with a pipe '|' allowed multiple fonts to be defined!

Thanks heaps.

2,535 Views
Not applicable

Hi,

I tried to use Abel font as you do in your example, but it's not working... All objects with Abel font show Times New Roman font.

Later, I tried with Tangerine font, and the same result.

I'm working with Qlikview 11.20 64 bits in a Windows 2008 R2 server 64b.

What can be wrong?

Thanks in advance

0 Likes
2,535 Views
Employee
Employee

Carlos,

You should double check that the document extension is getting loaded properly. Check for it in the head section of the page source.

0 Likes
2,535 Views
Not applicable

Thanks Arturo Muñoz

Unfortunatelly, the extension is not set in the head section of the webpage. This is my head section:

<head>

    <title>QlikView</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="shortcut icon" type="image/x-icon" href="https://community.qlik.com/QvAjaxZfc/htc/Images/favicon.ico" />

    <link rel="stylesheet" type="text/css"  href="https://community.qlik.com/QvAjaxZfc/htc/default.css" />

    <link rel="apple-touch-icon" href="https://community.qlik.com/QvAjaxZfc/htc/Images/Touch/touch-icon.png" />

    <link rel="apple-touch-icon" sizes="72x72" href="https://community.qlik.com/QvAjaxZfc/htc/Images/Touch/touch-icon_72x72.png" />

    <link rel="apple-touch-icon" sizes="114x114" href="https://community.qlik.com/QvAjaxZfc/htc/Images/Touch/touch-icon_114x114.png" />

  <script type="text/javascript" src="/QvAjaxZfc/htc/QvAjax.js"></script>

</head>

I verified the extesion is loaded in Extension tab in document's properties. I also found the extension in C:\Users\[username]\AppData\Local\QlikTech\QlikView\Extensions\Document\customfonts.

Could you show me an example of head section linking to document extension?

Thanks in advance.

0 Likes
2,535 Views
Employee
Employee

I don't have any example of head section available to share but you should see a line with the link to the font. Please make sure the extension is properly installed in the QlikView Server.

0 Likes
2,535 Views
Not applicable

Thanks, anyway.

I finally changed the default.css file. I included an @import clause as seen in Google Fonts API page. It works in Internet Explorer and in Safari.

0 Likes
2,535 Views
Luminary
Luminary

Hi Arturo,

I was just playing with this with the Roboto font and all seemed to be going well.  However, I noticed that the fonts in the bitmap charts - which are generated on the server - did not have the correct font.  I stopped and started the QlikView Server Service and all was well.

Regards,

Stephen

0 Likes
2,535 Views
Employee
Employee

Hey, assuming that you already installed the Roboto font in the server, I would double check that the font name in the server match with your desktop font name. If you have QlikView Desktop installed in that server try to open the app and check that everything is OK.

2,535 Views
Luminary
Luminary

Hi Arturo,

All was installed and working in the list boxes, etc.  All looked fine in QlikView desktop.  It was only the bitmap charts that were not displaying correctly in the Ajax.  I presume that this was because the service cached the fonts that it was using.

As I said in my message above, once I stopped and restarted the QlikView Server Service then all was well and the bitmap charts render with the correct Roboto font.

Regards,

Stephen

2,535 Views
Employee
Employee

Gotcha, thanks for the clarification. I guess I should keep reading till the bottom of the comment before hitting reply

0 Likes
2,535 Views
aemaaema
New Contributor II

Nice tutorial

0 Likes
2,535 Views
Not applicable


Hi,

We want to use Accord Ttk font to render Qlikview dashboards on an iPad.

I have installed the fonts on the Qlikview server.

I have tried following the steps suggested above except the difference being I am not using Google fonts.

That has not solved the issue.

Will there be a restart or Qlikview server service required to resolve the issue?

Also are there any other steps to be performed to resolve the issue.

I got feedback from certain people suggesting me to make changes to default.css file.

Would appreciate a quick feedback for the issue.

Thank you.

0 Likes
2,535 Views
Employee
Employee

Hi Shilpi,

I didn't need to restart the server but I guess I would try to restart if possible. There aren't any extra steps and it isn't that important where the font file is hosted; Google, your own server, doesn't really matter as long as it is always accessible.

2,535 Views
daiana_rossignol
New Contributor III

great contribution! it's awesome!

0 Likes
2,535 Views
dsmithqlik
New Contributor II

This is really good information.  If I have multiple fonts I want to add to my design, can I specify multiple QVA.LoadCSS statements?

0 Likes
2,535 Views
Not applicable

Hey David

You are in fact able to have multiple fonts. The LoadCSS Statement would look like this:

    Qva.LoadCSS("http://fonts.googleapis.com/css?family=Abel|Play");

By separating with the pipe or | you can identify multiple families of fonts.

Hope this helps.

Cheers Kaite

2,535 Views
daiana_rossignol
New Contributor III

Hi!

The code itself gives you all the fonts you need on the same code line.

Example:

Qva.AddDocumentExtension('customfonts', function(){

//Load a CSS style sheet

Qva.LoadCSS("http://fonts.googleapis.com/css?family=Gudea:400,700,400italic|Montserrat+Subrayada:400,700");

});

This code is actually generated on google fonts webpage.

Hope it helps!

Dai

De: David Smith

Enviado el: lunes, 9 de febrero de 2015 23:07

Para: Daiana Rossignol

Asunto: Re: - 8 steps to customize your QlikView apps with Google Fonts

<http://community.qlik.com/resources/images/palette-1004/headerLogo-1391206184624-QlikCommunity_logo.gif>

2,535 Views
dsmithqlik
New Contributor II

This is very helpful.    I am still confused about a couple things.   I am already using a document extension so I can use a CSS to control the look of my application.  Now I have a handful of fonts that I want to make available to all of our application across the board.   Fonts were installed to server.    As I already have a  Qva.LoadCSS statement in my java script that points to the application specific CSS, I'm not sure how I would keep my existing LoadCSS and include the QVA.LoadCSS statement you show.    As much of the HTML/CSS/JS is out of my area of expertise, I have been reading up.  It looks like if I can ge the following statements into the default header of all my document it will do what I am looking for BUT I don't know how I can do this.

Example:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>

<link rel="stylesheet" type="text/css" media="screen" href="/css/font-awesome.css">

<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css">

<link rel="stylesheet" type="text/css" media="screen" href="/css/grid.css">

Carlos Garcia above mentioned doing an @import in his CSS which looks like it will work as well but I am reading that a link might be more efficient?

In summary, Is there a way to change the "Default" HTML header and include the fonts so they are available across the board to all applications without using a specific document extension in all applications.

Is there a benefit to the @import vs what is described above?

As a side note, all access to our apps will be via Ajax.  

0 Likes
2,535 Views