CODEWITHSUNDEEP
javascriptinternet-explorer-8webfontsgoogle-webfonts
david
david

Reputation: 37

Google Webfonts (Loader) in IE8 or lower

I'm trying to load about 40 fonts for a web project. People will have the ability to choose between custom fonts in a web shop. I use the Web Font Loader from Google and it works well, except in IE8 and lower.

So I'm printing my php array with the correct font-families that the Webfont Loader needs to load from Google. If I try to load all 40 fonts, it works in all browsers except in Internet Explorer 8 and below.

If I limit my font-array to 6 fonts, then those 6 fonts get loaded. But when I just add one more font to the array IE8 can't load the fonts. I get a Bad Request in my "Network"-tab from the developer tools, yet my url in the http-request seems OK.

Somebody else had had this problem before? Is the length of a Request URL in a HTTP-Header limited in IE8 and below?

<script type="text/javascript">
  WebFontConfig = {
       google: { families: /*json_encode(php array here)*/ },
  };
  (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
               '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
  })();
</script>

I also tried to paste all the families in one 'link'. But also.. a Bad Request in IE8 and below.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family= /* families */">

The request with %7 as '|' and the response:

GET /css?family=Aclonica%7CAveria+Serif+Libre%7CBoogaloo%7CCandal%7CCantora+One%7CCapriola%7CCarter+One%7CChewy%7CCoda+Caption:800%7CComfortaa%7CCourgette%7CCreepster%7CCrete+Round%7CDamion%7CDays+One%7CFrancois+One%7CFredoka+One%7CGalindo%7CGloria+Hallelujah%7CIndie+Flower%7CIrish+Grover%7CJust+Me+Again+Down+Here%7CLeckerli+One%7CLobster+Two%7CLondrina+Solid%7CLove+Ya+Like+A+Sister%7CMcLaren%7CMiniver%7CPiedra%7CPlaster%7CPoiret+One%7CQuantico%7CRacing+Sans+One%7CRadley%7CRammetto+One%7CRevalia%7CSchoolbell%7CSmokum%7CSniglet%7CStint+Ultra+Condensed%7CSue+Ellen+Francisco%7CUbuntu+Mono%7CUltra%7CUnifrakturCook:700%7CWaiting+for+the+Sunrise%7CYesteryear HTTP/1.1

https://docs.google.com/open?id=0B4anyChu_EhkRFNmRmd3UGY4RlU

And what I think is really weird: I get the correct data back from Google in the ResponseBody..

https://docs.google.com/open?id=0B4anyChu_EhkdFVqVjFVUVhFRWs

Upvotes: 2

Views: 2079

Answers (1)

david
david

Reputation: 37

Solved by loading 5 fonts at a time with WebFontLoader only in IE8 and below.

      <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
      <script>
        <?php
          $splitArrays = array_chunk($families, 5);
          foreach ($splitArrays as $id => $split) {
            echo 'WebFont.load({google:{families: ' . json_encode($split) . '}});';
          }
        ?>
      </script>

Google Web Fonts don't work in IE8. This article also describes how loading several fonts via a '<link>' tag fails in IE8 - therefore this bug appears not to be specific to using the web fonts loader.

Upvotes: 1

Related Questions