Webfont Loader & Google JSAPI Cannot load together?

Question

I'm not sure why, though getting a similar issue.

Trying to load in a font from fonts.com with webfontloader so I can call functions after they're loaded.

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
   WebFont.load({
      monotype: {
        projectId: 'xxxxxxxxxxxxxxxxxxxx'
      },
      active: function() {
         mainNav();
      }
   });

But when ever I include it WITH the jsapi

<script src="https://www.google.com/jsapi"></script>

I get the following issue in the console: Uncaught TypeError: Cannot call method 'hasAttribute' of null

Yet if loaded in separately, they're fine...

Any ideas?

Answer 1

Try using the following url to load the webfonts api:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>

Check the following post for more details: https://groups.google.com/forum/#!msg/google-ajax-search-api/dWVzQF_YWCM/Y3-R738wh78J

We no longer support partial version aliases for new versions of libraries. Any partial version aliases already in place will continue to be supported and updated. The reason is that URLs like https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js which is saying "give me the most recent version of jquery 1.x.x) have very short cache lifetimes since the most recent version can change at any time. This is bad for performance. This is also bad for your web site, in the event that a library makes breaking changes in its APIs between versions that cause your page to suddenly render differently. Libraries do not usually make such changes intentionally but pages sometimes depend on behavior of an unspecified corner case of an API that may be changed intentionally or inadvertently as the library is updated.

So we strongly recommend that you specify the complete version string when referencing libraries hosted on the Google AJAX APIs. You can always find the most recent version at https://developers.google.com/speed/libraries/devguide. In this case, the most recent 1.9.x version is currently 1.9.1 so we suggest using the URL https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js to get a stable version and better caching.

(Also, your example above doesn't have a closing </script> tag. Just want to verify this doesn't exist in your own code).