Qlik Community

QlikView Layout & Visualizations

Discussion Board for collaboration on QlikView Layout & Visualizations.

Announcements
Save the Date: QlikWorld Online, June 24-25, 2020. Free global virtual event for data integration and data analytic gurus. Register Today
Highlighted
New Contributor

How to activate Google webfonts for iPad/Safari?

Has anyone be able to get webfonts appear on iPad Safari browser for QlikView app?

I've used a specific webfont from Google for a QlikView iPad app which works if you open it in MS IE or Google Chrome (QV AccessPoint) but in Safari, the font doesn't appear?

Any suggestions?

Wim

Tags (1)
1 Solution

Accepted Solutions
Highlighted

Re: How to activate Google webfonts for iPad/Safari?

The following three-step approach seems to do the trick. We were trying to use the Roboto-fonts in a document, so that'll be the example font to configure.

  1. Download the relevant fonts from the Google fonts pages. Google Fonts exist in a variety of formats. In general, WOFF is supported by a wide (if not the widest) selection of platforms. Put the font files in a subdirectory of your web server's document root. You can use a relative path, but be aware that using Google fonts on the AccessPojnt page, or in QVW documents may require you to use different directories.
    I put mine in this new directory, because we'll be using Google fonts in Ajax documents, not in the AP itself:
    C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\htc\fonts

  2. For each font & font style, add a @font entry to a global css file that is included without a doubt. For the AP page, there is a custom.css files that you can change at will. For documents, AFAIK there is only a single possible destination and that is:
    C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\htc\default.css
    This is a large css file, and it's formatted like a rectangular block of characters (ie without whitespace). Add entries like the following to the front of the file:
    @font-face {
       font-family: 'Roboto';
       src: local('Roboto'), url('fonts/Roboto-Regular-webfont.woff') format('woff');
       font-weight: 400;
       font-style: normal
    }
    The exact syntax (style, weights and names) can be taken from the css file that accompanies each Google font package. The relative path refers to the font files we copied in a subdirectory of the default.css directory in step 1.

  3. Finally, add all missing mime type-definitions to your web server configuration for the different font file formats you copied. QVWS has no font file mime type definition whatsoever. IIS may have some, but you should carefully check whether the mime type for the font format you plan to use is present. If not, the whole font technique will NOT work.
    For QVWS, add entries to: C:\ProgramData\QlikTech\WebServer\config.xml
    For IIS: add entries to the Mime types-entry of the IIS server root menu->Properties->Mime types.
    For the WOFF format in the example above, the mime type is application/x-font-woff.

Restart a few services, and test the presence of your new font file. Create an HTML test page and place it in your web server document root. Or publish a QVW document that uses Google fonts.

Best,

Peter

View solution in original post

2 Replies
Highlighted
Not applicable

Re: How to activate Google webfonts for iPad/Safari?

Have you tried using the customfonts extension in QlikView?

8 steps to customize your QlikView apps with Google Fonts

try the link above, easy to install and works perfectly on iPad

Highlighted

Re: How to activate Google webfonts for iPad/Safari?

The following three-step approach seems to do the trick. We were trying to use the Roboto-fonts in a document, so that'll be the example font to configure.

  1. Download the relevant fonts from the Google fonts pages. Google Fonts exist in a variety of formats. In general, WOFF is supported by a wide (if not the widest) selection of platforms. Put the font files in a subdirectory of your web server's document root. You can use a relative path, but be aware that using Google fonts on the AccessPojnt page, or in QVW documents may require you to use different directories.
    I put mine in this new directory, because we'll be using Google fonts in Ajax documents, not in the AP itself:
    C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\htc\fonts

  2. For each font & font style, add a @font entry to a global css file that is included without a doubt. For the AP page, there is a custom.css files that you can change at will. For documents, AFAIK there is only a single possible destination and that is:
    C:\Program Files\QlikView\Server\QlikViewClients\QlikViewAjax\htc\default.css
    This is a large css file, and it's formatted like a rectangular block of characters (ie without whitespace). Add entries like the following to the front of the file:
    @font-face {
       font-family: 'Roboto';
       src: local('Roboto'), url('fonts/Roboto-Regular-webfont.woff') format('woff');
       font-weight: 400;
       font-style: normal
    }
    The exact syntax (style, weights and names) can be taken from the css file that accompanies each Google font package. The relative path refers to the font files we copied in a subdirectory of the default.css directory in step 1.

  3. Finally, add all missing mime type-definitions to your web server configuration for the different font file formats you copied. QVWS has no font file mime type definition whatsoever. IIS may have some, but you should carefully check whether the mime type for the font format you plan to use is present. If not, the whole font technique will NOT work.
    For QVWS, add entries to: C:\ProgramData\QlikTech\WebServer\config.xml
    For IIS: add entries to the Mime types-entry of the IIS server root menu->Properties->Mime types.
    For the WOFF format in the example above, the mime type is application/x-font-woff.

Restart a few services, and test the presence of your new font file. Create an HTML test page and place it in your web server document root. Or publish a QVW document that uses Google fonts.

Best,

Peter

View solution in original post