topic Re: Font qlikview-sans.ttf, in Integration, Extension & APIs

Font qlikview-sans.ttf,

Mon, 05 Oct 2015 02:34:44 GMT

I'm using Qlik Sense as an embedded solution and I'm having trouble resolving an issue with retrieving the fonts qlikview-sans.ttf, qlikview-sans-bold.ttf, qlikview-icons.ttf

When building/accessing the mashup via the Qlik Workbench, I don't have the issue retrieving the fonts, . The "View" button takes me directly to the mashup built in Workbench and everything works great. But, I do not wish to host the mashup within Qlik Workbench, I want it to be hosted on my company's site.

What Works

I've set the HTML and JS up the same on my company's host site, and many things work. I see:

The Qlik object I pulled in rendered correctly
qlikui.css is retrieve correctly from Qlik Enterprise
client.css is retrieve correctly
require.js is retrieved correctly

This is good.

What Doesn't Work

I see errors in the Chrome console:

Chrome Browser Error 1

Font from origin 'https://dev-qlik01:4244' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.

Chrome Browser Error 2

https://dev-qlik01:4244/windows_authentication/?targetId=41cb7acc-cf9e-4d0e-bc4b-68774730fee0

Attempting to get https://dev-qlik01/resources/fonts/qlikview-sans.ttf seems have Qlik return a 302 redirect. And then next browser attempt to authenticate at the redirection url failes with a 401 Unauthorized.

Screenshots attached.

Any thoughts? Thank you.

Re: Font qlikview-sans.ttf,

Aiham_Azmeh — Mon, 05 Oct 2015 06:00:42 GMT

Hi Michael,

It looks like a classic cross-origin issue, you should take a look at this thread: Re: Sense mashup: Font fail in IE.

What you can do is to configure you server to allow CORS, a quick example is here (for Apache) enable cross-origin resource sharing.

But I will recommend you, is to simply copy the fonts to a folder in your webserver

Hope it helps,

regards,

aiham

Re: Font qlikview-sans.ttf,

Mon, 05 Oct 2015 17:10:39 GMT

Thank you Aiham,

I'm not sure if I understand, unless if I have fundamental misunderstanding about CORS.

I understand there are 2 servers:

a) Qlik Sense Enterprise Server (hosts Qlik report objects)

b) Product WebSite WebServer (hosts my site and mashup "shell")

1) While you suggested that I configure my own product webserver to allow CORS, I understand CORS to be about communication between the browser and and the target server (i.e. Qlik Sense Enterprise). My Product WebSite WebServer doesn't play a role in the CORS communication as I'm not making an asynchronous call to it... right?

2) And a colleague, did turn on CORS on http-server with node.js, and had the same exact error.

Yes, I imagine, that hosting the fonts on my product website webserver, that is an option that is likely to work... but seems like it shouldn't be necessary.

Re: Font qlikview-sans.ttf,

Mon, 05 Oct 2015 17:39:19 GMT

I suppose a sub question to understanding this issue, is this:

Q) Why does retrieving a font give me http "Status Code:302 Authenticate at this location"? See screenshot. Especially when the websockets are working.

thanks!

Michael

Re: Font qlikview-sans.ttf,

Alexander_Thor — Tue, 06 Oct 2015 01:18:26 GMT

There is, or has been at least, an open big related to CORS and fonts and we are working on fixing it.

You are correct, however you can specify additional response headers in the virtual proxy and thus enable CORS on Qlik Sense server.

Sent from my Windows Phone

Re: Font qlikview-sans.ttf,

Tue, 06 Oct 2015 03:08:46 GMT

Thank you Alexander,

This is helpful to know that there is a bug with retrieving fonts. BTW, my company is using Qlik Sense 2.0.3.0, and we hope to upgrade to 2.1.1 soon. Though I imagine the issue isn't fixed with any released version. Is this right?

Workarounds

Regarding workarounds...

1) Virtual Proxy: We've played around with specifying additional response headers without success. "access-control-allow-origin: *"

Didn't help, in fact the response header "access-control-allow-origin" is already passed back . But I imagine that the HTTP Status Code 302 is the real problem.

2) Host Fonts - We may try hosting all 3 font files ourselves.

Are there other workarounds? Thanks again Alexander.

Re: Font qlikview-sans.ttf,

Tue, 06 Oct 2015 17:57:58 GMT

Hello Alexander,

I've explored workaround #2 Host Fonts, without success.

Steps

1. I've added the fonts to our CDN (or front end asset) directory.

2. I've added the following code to our mashup page. See Figure 1

Figure 1

    <style>
        @@font-face {
            font-family: 'QlikView Sans';
            src: url(http://localhost:8060/lm/spa/qlik/fonts/qlikview-sans.ttf) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @@font-face {
            font-family: 'QlikView Sans';
            src: url(http://localhost:8060/lm/spa/qlik/fonts/qlikview-sans-bold.ttf) format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        @@font-face {
             font-family: "QlikView Icons";
             src: url(http://localhost:8060/lm/spa/qlik/fonts/qlikview-icons.ttf) format("truetype");
             font-weight: normal;
             font-style: normal;
         }
    </style>

I observe that the fonts are correctly retrieved. Both Chrome, and ._____ say that these fonts are successfully downloaded:

qlikview-sans.ttf
qlikview-icons.ttf

I also observe that we still get font errors when retrieving from here (As we can't change your client.css file):

But the fonts are not applied. Really the biggest issue is that the qlikview-icons.ttf are not retrieved.

Can you assist?

Re: Font qlikview-sans.ttf,

Alexander_Thor — Tue, 06 Oct 2015 20:15:15 GMT

"I also observe that we still get font errors when retrieving from here (As we can't change your client.css file):"

Sure you can or what's easier is probably just copying the client.css file locally to your server and edit it.

Then just make sure you reference the local client.css file instead of the one on the Qlik server.

You will find the font block in there, that's at least how we solved it for our public mashups.

Things might have changed since then however, it's been a while since I was messing around with Mashups

Re: Font qlikview-sans.ttf,

Tue, 06 Oct 2015 21:07:52 GMT

Thank you Alexander,

Workaround #3: Host client.css

May I call your suggestion "workaround #3: Host client.css"?

We considered this approach, but didn't think this would be good because:

We couldn't find documentation on where to find "client.css".
After exploring our harddrives, we couldn't find a folder containing "client/client.css", nor the fonts, nor "autogenerated/qlikui.css".
If we were to upgrade, and you were to update client.css in a future version of Qlik Sense, we wouldn't automatically get those changes--maintenance difficulties.

So we assumed this wasn't a "blessed" approach from Qlik, and thought it better to avoid this.

Acquiring client.css?

Though if we took your suggestion however, how would you recommend acquiring the client.css file? Via the url that the mashup uses? Perhaps identified via Chrome Dev Tools?

Workaround #4: Host the mashup only withing Qlik Server

We considered another approach, while Qlik works on this bug. Perhaps we shouldn't host the mashup outside Qlik. We should host the mashup within Qlik, just as the Qlik Workbench is defaulted?

Thoughts?

thank you, we like your feedback.

Michael

Re: Font qlikview-sans.ttf,

Mon, 12 Oct 2015 22:35:25 GMT

Hi Michael,

I'm no expert in this area but I will try to explain what I did to the best of my ability . FYI - my set-up with Qlik is that I have Qlik Sense Server and my external web server deployed on a desktop box.

I applied a solution akin to Workaround #2 by hosting the fonts on my external web server (i.e. simply coping from C:\Program Files\Qlik\Sense\Client\fonts and then to your respective external web server location). All I had to do then was write one line of code in my html file to refer to the location of the fonts on my external web server:

I did not have to change the src line of code in the fonts.css file (see code below).

@font-face {

font-family: "QlikView Sans";

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

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: "QlikView Sans";

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

font-weight: bold;

font-style: normal;

}

@font-face {

font-family: "QlikView Sans";

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

font-weight: normal;

font-style: italic;

}

@font-face {

font-family: "QlikView Sans";

src: url(qlikview-sans-bold-italic.ttf) format('truetype');

font-weight: bold;

font-style: italic;

}

@font-face {

font-family: "QlikView Icons";

src: url(qlikview-icons.ttf) format('truetype');

font-weight: normal;

font-style: normal;

}

.buttons {

width: 500px;

height: 25px;

padding: 0px 5px 5px 5px;

}

What I did looks pretty similar to what you have done so not sure why it would not be applied in your case but happy to assist if you have any additional questions.

Cheers,

Joel

Re: Font qlikview-sans.ttf,

alex_nerush — Mon, 27 Feb 2017 09:11:34 GMT

Hi! if you host your solution on another host please try to add your host in Host white list (Advanced Tab) of Qlik Sense Virtual Proxy properties