Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

cpomeren003
Contributor

Force mashup to use Qlik sense font on unicodes / chr

Hi everyone,


I am currently using some chr() / Unicodes inside my mashup map object, the problem is these chr() / unicodes default to the windows image of the chr() / unicode instead of the qlik sense image. The thing is, I like the qlik sense images better (they are cleaner).

Problem in pictures:

How it looks in Qlik sense:

300720181.png
How it looks inside my mashup:
300720182.png

If you search for "hot beverage" here:
https://unicode.org/emoji/charts/full-emoji-list.html

You will recognize the windows picture from the second example.

So I now know that it's using windows image and I need to change it back to the Qlik Sense image. I tried placing around with @fontface inside css, something like this:

@font-face {

font-family: "Lui-Icons";

src: url('\fonts\lui-icons.woff') format('woff');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: "QlikView Sans";

src: url(\fonts\qlikview-sans.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

.body {

font-family: Lui-Icons;

}


The problem is, neither font-family Lui-Icons or QlikView Sans works. Does anyone know how to fix this?

Any help is appreciated.

Tags (3)
4 Replies
erik_wetterberg
Valued Contributor III

Re: Force mashup to use Qlik sense font on unicodes / chr

Hi,

You do load Qlik Sense style sheets in your mashup?? Have you tried a CSS rule that matches your icon elements and has font-family: "QlikView Sans".

Erik Wetterberg

Erik Wetterberg
https://extendingqlik.upper88.com/
cpomeren003
Contributor

Re: Force mashup to use Qlik sense font on unicodes / chr

Hi Erik,

You do load Qlik Sense style sheets in your mashup??

I load this Qlik Sense stylesheet:

<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">

I don't load in the .woff or .tff inside my html.

Have you tried a CSS rule that matches your icon elements and has font-family: "QlikView Sans".

The icon elements are inside this html (canvas of the map object, can't go down any lower):

<canvas class="idevio-map-canvas" tabindex="0" width="651" height="811" style="position: absolute; left: 0px; top: 0px;"></canvas>

And already has this css applied to it:

.qv-object * {

   font-family: QlikView sans-serif;

}

This originates from the qlik-styles.css stylesheet.

If you need any other information please let me know.

Casper

cpomeren003
Contributor

Re: Force mashup to use Qlik sense font on unicodes / chr

After a lot of trying and failing I just figured out that Internet Explorer 11 does show the correct visuals (shows qlik sense font). On the other hand both Google Chrome as Mozilla Firefox don't show the correct visuals (show standard windows font).

Anyone have any idea what causes this difference?

cpomeren003
Contributor

Re: Force mashup to use Qlik sense font on unicodes / chr

Ok, it gets even weirder. After a lot of trying I have made a new discovery:

On a Windows 7 Ultimate pc it shows the correct display (the non-windows one) on both Internet Explorer 11 and Google Chrome;

On a Windows 10 Enterprise laptop it shows the correct display (the non-windows one) on only Internet Explorer 11. On Google Chrome it shows the windows font.

So now the question is, what is the difference between these Windows versions that causes this?

Community Browser