2 Replies Latest reply: Mar 9, 2015 5:45 AM by Peter Cammaert RSS

    How to activate Google webfonts for iPad/Safari?

    Wim Candries

      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

        • 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

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

            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