Google Fonts won't load when using KineticJS

I'm having trouble with getting my Google Font to load. I have tried to get it to load with the three different methods, standard, @import and JavaScript, but with no result to follow. Although if I run a tween with the KineticJS framwork the font load at the same time and looks just fine.

My code looks something like this.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    WebFontConfig = {
        google: { families: [ 'Hanalei::latin' ] }
    };
    (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>
    </head>
    <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
    <script defer="defer">
    var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 600
    });

  var layer = new Kinetic.Layer();

    var text1 = new Kinetic.Text({
    x: 100,
    y: 100,
    text: 'Test',
    fontSize: 20,
    fontFamily: 'Hanalei',
    fill: 'black'
  });


  layer.add(text1);
  stage.add(layer);

</script>

Solution

I had the same problem with FontAwesome. Here is my solution:

//wait for fontawsome to load
setTimeout(function(){
   kineticStuff();
}, 500);

No need to do anything else.