From aa780d2b8a83b74b056a7006d184a712d4ecdf13 Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Fri, 16 Oct 2015 14:09:54 +0200
Subject: [PATCH] updates the googlefontpicker to lazy load the required google
 font lib.

---
 .../editors/googlefontpicker.js               | 56 ++++++++++++-------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js
index b32311ee7c..ce6bf2c9f7 100644
--- a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/googlefontpicker.js
@@ -104,6 +104,30 @@ angular.module("Umbraco.canvasdesigner")
         }
     };
 
+    function loadFont(font, variant) {
+        WebFont.load({
+            google: {
+                families: [font.fontFamily + ":" + variant]
+            },
+            loading: function () {
+                console.log('loading');
+            },
+            active: function () {
+                $scope.selectedFont = font;
+                $scope.selectedFont.fontWeight = googleGetWeight(variant);
+                $scope.selectedFont.fontStyle = googleGetStyle(variant);
+                // If $apply isn't called, the new font family isn't applied until the next user click.
+                $scope.change({
+                    fontFamily: $scope.selectedFont.fontFamily,
+                    fontType: $scope.selectedFont.fontType,
+                    fontWeight: $scope.selectedFont.fontWeight,
+                    fontStyle: $scope.selectedFont.fontStyle,
+                });
+            }
+        });
+    }
+
+    var webFontScriptLoaded = false;
     $scope.showFontPreview = function (font, variant) {
 
         if (!variant)
@@ -114,27 +138,19 @@ angular.module("Umbraco.canvasdesigner")
             // Font needs to be independently loaded in the iframe for live preview to work.
             document.getElementById("resultFrame").contentWindow.getFont(font.fontFamily + ":" + variant);
 
-            WebFont.load({
-                google: {
-                    families: [font.fontFamily + ":" + variant]
-                },
-                loading: function () {
-                    console.log('loading');
-                },
-                active: function () {
-                    $scope.selectedFont = font;
-                    $scope.selectedFont.fontWeight = googleGetWeight(variant);
-                    $scope.selectedFont.fontStyle = googleGetStyle(variant);
-                    // If $apply isn't called, the new font family isn't applied until the next user click.
-                    $scope.change({
-                        fontFamily: $scope.selectedFont.fontFamily,
-                        fontType: $scope.selectedFont.fontType,
-                        fontWeight: $scope.selectedFont.fontWeight,
-                        fontStyle: $scope.selectedFont.fontStyle,
+            if (!webFontScriptLoaded) {
+                $.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js')
+                    .done(function() {
+                        webFontScriptLoaded = true;
+                        loadFont(font, variant);
+                    })
+                    .fail(function() {
+                        console.log('error loading webfont');
                     });
-                }
-            });
-
+            }
+            else {
+                loadFont(font, variant);
+            }
         }
         else {