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
Employee
Employee

The performance benefits of loading the fonts through a separate LoadCSS() statements will be in the milliseconds so I would bake it into my original CSS file instead, either as a @import or a normal font-family declaration.

The little performance gain you might get is outweighed by maintainability in my book

392 Views
dsmithqlik
New Contributor II

Thanks for everyone's help so far on this.  I am successful in bringing in several new fonts and implementing those so the user's see them when they access the applications via ajax.  The style sheet is very simple currently just changing a few things like

/* List Box Defaults */

.QvListbox{

font-family:'Open Sans'  !important;

}

/* Caption Defaults */

.QvCaption{

background-color:#f0f1f2 !important;

border-bottom:1px solid #f8f9fa !important;

Is there a way to set the style sheet so it only affects a single object.    Meaning for CH01 I want the caption with background-color:#f0f1f2 and CH02 background-color:#474747 ?

0 Likes
392 Views
dsmithqlik
New Contributor II

To add to this.   I am using firebug and can identify the class and the class id.   The div is embedded 5-7 layers so several embedded  classes.   The issue I am having is on the style sheet formatting it specific for a single chart or single list box.    If someone can give me an example I would greatly appreciate.  Below is my last failed attempt.

#QvFrame_Document_LB218  .horizontal_linmentcontainer_QvCaptiontext{
font-family:Tahoma !important;
color:#FFFFFF!important;
  font-size: 24pt;
}

0 Likes
392 Views
Not applicable

I have used this google font and it seems to be working in AJAX mode.

When i turn to IE Plug in mode its not working.

Is google font only works in AJAX mode?

0 Likes
392 Views
Employee
Employee

Extensions, object and document (which is used to load Google fonts), is only available for the AJAX-client and for webview in QlikView Desktop.

Extensions do not render in the IE Plugin.

0 Likes
392 Views
lucas4bi
Contributor

Hello,

im using the extention a modified it as it follows:

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

  //Load a CSS style sheet

  Qva.LoadCSS("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300");

  });

This is because i need to load 2 different font from the same family. However only the first font is loaded (700), the second one is never rendered. what am i missing?

Edit: found out that even if the fonts are listed as "Open Sans Condensed", after the installation one of them appears as "Open Sans Condensed Light", like it's a different font, not just a different style.

Only the Bold (700) is listed ad the original "Open Sans Condensed", and in fact that's the only text that is the only one rendered using the extension.

How can i achieve my goal this way? Google doesn't have a family for "Light".

0 Likes
392 Views
daiana_rossignol
New Contributor III

Hi, just lose the number type and use the regular font (simply Open Sans Condensed).

If you need you can make it bold it’lll work that way.

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

//Load a CSS style sheet

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

});

Regards

Dai

De: Luca Cavallari

Enviado el: viernes, 3 de julio de 2015 18:04

Para: Daiana Rossignol

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

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

0 Likes
392 Views
Partner
Partner

I'm trying to use the open sans font. But it isn't working for me. Can I do something wrong?

Regards,

Kris

0 Likes
392 Views
Employee
Employee

Hi Kris, if you could explain it a bit further we might be able to help, give us some more detail please.

0 Likes
392 Views
Partner
Partner

Hi Arturo,

It finaly works for me.

I've set the following in the begin of the default.css in C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\htc

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

And this is working for me.

Regards,

Kris

392 Views
Employee
Employee

Glad to hear that!

0 Likes
392 Views
daniel_kusiak
Contributor II

Great tutorial. Thanks.

0 Likes
392 Views
Partner
Partner

Guys, I still can not have the extension running on the server.

I want to use Exo 2 font from google.

Did the steps from the theme 1:1, allow extensions is marked, added @import url(http://fonts.googleapis.com/css?family=Exo+2);

copied the folder Extensions from C:\Users\user\AppData\Local\QlikTech\QlikView to the C:\ProgramData\QlikTech\QlikViewServer

and still the same ...

Please advise me what to do?

Thank you

0 Likes
392 Views
Employee
Employee

Hey Ivan,

Please make sure you place the extension in the right folder: QlikTip #40: Installing/Deploying QlikView Extensions

0 Likes
392 Views
Partner
Partner

Hi Arturo,

Yes, I have copied it to the right folder.

this is what I have in the script,js:

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

  //Load a CSS style sheet

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

  });

Here I tried it with Exo 2, Exo%202 , .... the same ...

Tried on a different server with Abel font and it works, when try with Exo 2 it doesn't ...

Probably Exo 2 is not supported or ... ?

0 Likes
392 Views
Employee
Employee

If I remember well it was a little bit tricky when the font name have spaces. Anyway try to debug the page using your browser developer tools and check that the font is actually being loaded

0 Likes
392 Views
Partner
Partner

Hi, seems it is not loaded ... can't see it anywhere in the script.

...

Seems the solution is partly possible.

Anyone else experiencing the same problem?

0 Likes
392 Views
Employee
Employee

Is this working on your desktop and stop working when in Server? Are you using any other server extensions? are they working properly? Just to make it clear, this is a document extension so it should be placed under Document folder.

C:\Users\[user]\AppData\Local\QlikTech\QlikView\Extensions\Document (Win7)

If other document extensions are working properly then I would focus on understanding why this particular one doesn't load properly by debugging the web site. As a temporary fix you could try Kris Vliegen's workaround:

I've set the following in the begin of the default.css in C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\htc

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

0 Likes
392 Views
Partner
Partner

Hi Arturo, I have already tested all possible combinations ... Don't know what would be the reason. Have you ever you managed to have such a font like Exo 2 (with space) working properly with the extension?


Also what I see is that actually in IE browser using ajax the fonts are working well but in Chrome they are not rendered properly!? Ideas? Bug? ...

0 Likes
392 Views
Not applicable

HI Ivan, I have this problem too. have you had any luck resolving this?

0 Likes
392 Views
Partner
Partner

Hi Piers,

unfortunately I haven't yet ... seems it is a bug!

0 Likes
392 Views
Partner
Partner

Great!

0 Likes
392 Views
arulsettu
Honored Contributor III

Hi Arturo Muñoz

i followed everything as you mentioned. but its not changing the font in client machine

code is like below

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

  //Load a CSS style sheet

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

  });

can you please take a look

Thanks

0 Likes
392 Views
Employee
Employee

Looks good to me, please double check that line gets loaded when your app is open webview or in browser. Please check the previous comments for tips, you will find some other having issues.

0 Likes
392 Views
Partner
Partner

Hi,

What should I put in the LoadCSS if I am not using google fonts? I have my own font which I have installed on my desktop and on the QVS, but don't have a css file. Can you help?!

Thanks

Alistair

0 Likes
392 Views
Employee
Employee

Hey Alistair,


You should be able to use your own font, you just need to adjust the extension a little bit to use the font hosted in your own server, instead of ("http://fonts.googleapis.com/css?family=Abel"); you should define your font-face as described here: CSS3 Web Fonts


Something like

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

           //Load a CSS style sheet

     Qva.LoadCSS("@font-face {font-family: myFont; src: url(myFont.woff);}");

           });

0 Likes
392 Views
obruski10
New Contributor II

Hi Arturo,

is it also possible to point to a local CSS instead defining the font-face inside the LoadCSS function??

Thanks in advance.

0 Likes
392 Views
owais_sarwar
New Contributor II

Hi @amz

There is an issue i am facing to regarding the qlikview compatibility with my custom font i.e. Bebas Nueue Bold.

I downloaded the attached file "Customfonts.qar" as you have uploaded. Changed the file type in to ZIP. There are two files Script and definition. I opened the difiniton via Notepad and mad changes as you have elaborated.

<?xml version="1.0" encoding="utf-8"?>

<ExtensionObject Label="customfonts" Path="customfonts" Description="Loads customfonts " Type="Bebas Nueue Bold">

</ExtensionObject>

I am then trying to rename the Zip file in to "customfonts.qar" format again. It is not changing it file type to qar instead its just showing the same ZIP file.

Your cooperation would be highly appreciated.

0 Likes
392 Views
guilherme_pinto
New Contributor

Hello! 

How can I make a reference to a font file that is not disponible at internet. A local file at my qlikview server for example.

Thanks!

0 Likes
392 Views
Partner
Partner

Anyone having issues with this extension on version 12.4 SR 1? We recently upgraded from 12 and are experiencing a strange issue.

The correct google font gets loaded, but there is spacing above and below that gets shortened. If the fontsize is small then in some tables the text gets cut off from the bottom due to the cells having too short of a height.

However, upon refreshing the browser page, the font returns back to normal and the spacing and cell heights are back to the way it was. Any ideas? I would rather not have our clients refreshing the qlikview app. 

0 Likes
235 Views