Allow use of display option for google font api

README.md

@@ -348,6 +348,17 @@ WebFontConfig = {
 
 The `text` subsetting functionality is only available for the Google module.
 
+Additional option you can pass to google option is display, it enables use of [font-display(https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)] property.
+
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Droid Sans', 'Droid Serif'],
+    display: 'swap'
+  }
+};
+```
+
 ### Typekit
 
 When using [Typekit](http://www.typekit.com), specify the Kit to retrieve by its ID. You can find the Kit ID within Typekit's Kit Editor interface.

spec/modules/google/fontapiurlbuilder_spec.js

@@ -37,4 +37,12 @@ describe('modules.google.FontApiUrlBuilder', function () {
       '?family=Font1:bold,italic%7CFont2:italic%7CFont3' +
       '&subset=greek,cyrillic,latin');
   });
+  it('should build a proper url - display param', function () {
+    var builder = new FontApiUrlBuilder(undefined, undefined, 'swap');
+    builder.setFontFamilies(['Font1:bold,italic:greek,cyrillic', 'Font2:italic', 'Font3::latin']);
+    expect(builder.build()).toEqual(
+      FontApiUrlBuilder.DEFAULT_API_URL +
+      '?family=Font1:bold,italic%7CFont2:italic%7CFont3' +
+      '&subset=greek,cyrillic,latin&display=swap');
+  });
 });

spec/modules/google/googlefontapi_spec.js

@@ -59,13 +59,14 @@ describe('modules.google.GoogleFontApi', function () {
       loaded  = false;
       googleFontApi = new GoogleFontApi(fakeDomHelper, {
         api: 'https://moo',
-        families: ['Font1', 'Font2']
+        families: ['Font1', 'Font2'],
+        display: 'swap'
       });
       googleFontApi.load(function () { loaded = true; });
     });
 
     it('has inserted the link element correctly', function () {
-      expect(link).toEqual('https://moo?family=Font1%7CFont2');
+      expect(link).toEqual('https://moo?family=Font1%7CFont2&display=swap');
     });
 
     if (webfont.DomHelper.CAN_WAIT_STYLESHEET) {

src/modules/google/fontapiurlbuilder.js

@@ -3,7 +3,7 @@ goog.provide('webfont.modules.google.FontApiUrlBuilder');
 /**
  * @constructor
  */
-webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text) {
+webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text, display) {
   if (apiUrl) {
     this.apiUrl_ = apiUrl;
   } else {
@@ -12,6 +12,7 @@ webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text) {
   this.fontFamilies_ = [];
   this.subsets_ = [];
   this.text_ = text || '';
+  this.display_ = display || '';
 };
 
 
@@ -72,6 +73,10 @@ goog.scope(function () {
       url += '&text=' + encodeURIComponent(this.text_);
     }
 
+    if (this.display_.length > 0) {
+      url += '&display=' + this.display_;
+    }
+
     return url;
   };
 });

src/modules/google/googlefontapi.js

@@ -38,7 +38,8 @@ goog.scope(function () {
     var domHelper = this.domHelper_;
     var fontApiUrlBuilder = new FontApiUrlBuilder(
         this.configuration_['api'],
-        this.configuration_['text']
+        this.configuration_['text'],
+        this.configuration_['display']
     );
     var fontFamilies = this.configuration_['families'];
     fontApiUrlBuilder.setFontFamilies(fontFamilies);