Support Google Fonts API version 2 and advanced features from version 1

README.md

@@ -335,18 +335,31 @@ WebFontConfig = {
 };
 ```
 
-You can also supply the `text` parameter to perform character subsetting:
+**Advanced Google-only features:** You can also supply the `text` parameter to perform character subsetting, the `effects` parameter to enable [font effects](https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta), and the `display` parameter to control what happens when the [font is unavailable](https://developers.google.com/fonts/docs/getting_started#use_font-display):
 
 ```javascript
 WebFontConfig = {
   google: {
     families: ['Droid Sans', 'Droid Serif'],
-    text: 'abcdefghijklmnopqrstuvwxyz!'
+    text: 'abcdefghijklmnopqrstuvwxyz!',
+    effects: 'shadow-multiple',
+    display: 'swap'
   }
 };
 ```
 
-The `text` subsetting functionality is only available for the Google module.
+**API Version::** By default Google Fonts API version 1 is used. In order to use advanced features such as variable fonts, supply the `version: 2` parameter to target [Google Fonts API version 2](https://developers.google.com/fonts/docs/css2) instead:
+
+```javascript
+WebFontConfig = {
+  google: {
+    families: ['Work Sans:[email protected]', 'Inter:[email protected]'],
+    version: 2
+  }
+};
+```
+Note: font `effects` are currently only available when using version 1.
+
 
 ### Typekit
 

spec/modules/google/fontapiurlbuilder_spec.js

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

src/modules/google/fontapiurlbuilder.js

@@ -3,19 +3,30 @@ goog.provide('webfont.modules.google.FontApiUrlBuilder');
 /**
  * @constructor
  */
-webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text) {
+webfont.modules.google.FontApiUrlBuilder = function(apiUrl, text, display, effect, version) {
+  this.apiVersion_ = version === 2 ? 2 : 1;
+  const urlComponents = webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL_COMPONENTS[this.apiVersion_ - 1];
   if (apiUrl) {
     this.apiUrl_ = apiUrl;
+    this.apiSeparator_ = urlComponents[1];
   } else {
-    this.apiUrl_ = webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL;
+    this.apiUrl_ = urlComponents[0];
+    this.apiSeparator_ = urlComponents[1];
   }
   this.fontFamilies_ = [];
   this.subsets_ = [];
   this.text_ = text || '';
+  this.display_ = display || '';
+  this.effect_ = effect || '';
 };
 
+webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL_COMPONENTS = [
+  ['https://fonts.googleapis.com/css', '%7C' ],
+  ['https://fonts.googleapis.com/css2', '&family=']
+];
 
-webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL = 'https://fonts.googleapis.com/css';
+webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL = webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL_COMPONENTS[0][0];
+webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL_V2 = webfont.modules.google.FontApiUrlBuilder.DEFAULT_API_URL_COMPONENTS[1][0];
 
 goog.scope(function () {
   var FontApiUrlBuilder = webfont.modules.google.FontApiUrlBuilder;
@@ -62,7 +73,7 @@ goog.scope(function () {
     for (var i = 0; i < length; i++) {
       sb.push(this.webSafe(this.fontFamilies_[i]));
     }
-    var url = this.apiUrl_ + '?family=' + sb.join('%7C'); // '|' escaped.
+    var url = this.apiUrl_ + '?family=' + sb.join(this.apiSeparator_);
 
     if (this.subsets_.length > 0) {
       url += '&subset=' + this.subsets_.join(',');
@@ -72,6 +83,14 @@ goog.scope(function () {
       url += '&text=' + encodeURIComponent(this.text_);
     }
 
+    if (this.display_.length > 0) {
+      url += '&display=' + encodeURIComponent(this.display_);
+    }
+
+    if (this.effect_.length > 0) {
+      url += '&effect=' + encodeURIComponent(this.effect_);
+    }
+
     return url;
   };
 });

src/modules/google/googlefontapi.js

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