diff --git a/README.md b/README.md index 097b841e..d2e832e8 100644 --- a/README.md +++ b/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:wght@400..700', 'Inter:wght@100..300'], + version: 2 + } +}; +``` +Note: font `effects` are currently only available when using version 1. + ### Typekit diff --git a/spec/modules/google/fontapiurlbuilder_spec.js b/spec/modules/google/fontapiurlbuilder_spec.js index 0ffecb72..a7ade76f 100644 --- a/spec/modules/google/fontapiurlbuilder_spec.js +++ b/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'); + }); }); diff --git a/src/modules/google/fontapiurlbuilder.js b/src/modules/google/fontapiurlbuilder.js index 8d1bec18..2eae6259 100644 --- a/src/modules/google/fontapiurlbuilder.js +++ b/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; }; }); diff --git a/src/modules/google/googlefontapi.js b/src/modules/google/googlefontapi.js index 8f3e5a43..f7e1cbd8 100644 --- a/src/modules/google/googlefontapi.js +++ b/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); diff --git a/webfontloader.js b/webfontloader.js index d1e856a2..cf8d1c54 100644 --- a/webfontloader.js +++ b/webfontloader.js @@ -1,17 +1,17 @@ -/* Web Font Loader v1.6.28 - (c) Adobe Systems, Google. License: Apache 2.0 */(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2=b.f?e():a.fonts.load(fa(b.a),b.h).then(function(a){1<=a.length?d():setTimeout(f,25)},function(){e()})}f()}),e=null,f=new Promise(function(a,d){e=setTimeout(d,b.f)});Promise.race([f,d]).then(function(){e&&(clearTimeout(e),e=null);b.g(b.a)},function(){b.j(b.a)})};function Q(a,b,c,d,e,f,g){this.v=a;this.B=b;this.c=c;this.a=d;this.s=g||"BESbswy";this.f={};this.w=e||3E3;this.u=f||null;this.m=this.j=this.h=this.g=null;this.g=new M(this.c,this.s);this.h=new M(this.c,this.s);this.j=new M(this.c,this.s);this.m=new M(this.c,this.s);a=new G(this.a.c+",serif",J(this.a));a=O(a);this.g.a.style.cssText=a;a=new G(this.a.c+",sans-serif",J(this.a));a=O(a);this.h.a.style.cssText=a;a=new G("serif",J(this.a));a=O(a);this.j.a.style.cssText=a;a=new G("sans-serif",J(this.a));a= +function ga(a){var b=4,c="n",d=null;a&&((d=a.match(/(normal|oblique|italic)/i))&&d[1]&&(c=d[1].substr(0,1).toLowerCase()),(d=a.match(/([1-9]00|normal|bold)/i))&&d[1]&&(/bold/i.test(d[1])?b=7:/[1-9]00/.test(d[1])&&(b=parseInt(d[1].substr(0,1),10))));return c+b};function ha(a,b){this.c=a;this.f=a.s.document.documentElement;this.h=b;this.a=new F("-");this.j=!1!==b.events;this.g=!1!==b.classes}function ia(a){a.g&&w(a.f,[a.a.c("wf","loading")]);K(a,"loading")}function L(a){if(a.g){var b=y(a.f,a.a.c("wf","active")),c=[],d=[a.a.c("wf","loading")];b||c.push(a.a.c("wf","inactive"));w(a.f,c,d)}K(a,"inactive")}function K(a,b,c){if(a.j&&a.h[b])if(c)a.h[b](c.c,J(c));else a.h[b]()};function ja(){this.c={}}function ka(a,b,c){var d=[],e;for(e in b)if(b.hasOwnProperty(e)){var f=a.c[e];f&&d.push(f(b[e],c))}return d};function M(a,b){this.c=a;this.f=b;this.a=t(this.c,"span",{"aria-hidden":"true"},this.f)}function N(a){u(a.c,"body",a.a)}function O(a){return"display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:"+I(a.c)+";"+("font-style:"+H(a)+";font-weight:"+(a.f+"00")+";")};function P(a,b,c,d,e,f){this.g=a;this.j=b;this.a=d;this.c=c;this.f=e||3E3;this.h=f||void 0}P.prototype.start=function(){var a=this.c.s.document,b=this,c=q(),d=new Promise(function(d,e){function f(){q()-c>=b.f?e():a.fonts.load(fa(b.a),b.h).then(function(a){1<=a.length?d():setTimeout(f,25)},function(){e()})}f()}),e=null,f=new Promise(function(a,d){e=setTimeout(d,b.f)});Promise.race([f,d]).then(function(){e&&(clearTimeout(e),e=null);b.g(b.a)},function(){b.j(b.a)})};function Q(a,b,c,d,e,f,g){this.v=a;this.B=b;this.c=c;this.a=d;this.o=g||"BESbswy";this.f={};this.w=e||3E3;this.u=f||null;this.m=this.j=this.h=this.g=null;this.g=new M(this.c,this.o);this.h=new M(this.c,this.o);this.j=new M(this.c,this.o);this.m=new M(this.c,this.o);a=new G(this.a.c+",serif",J(this.a));a=O(a);this.g.a.style.cssText=a;a=new G(this.a.c+",sans-serif",J(this.a));a=O(a);this.h.a.style.cssText=a;a=new G("serif",J(this.a));a=O(a);this.j.a.style.cssText=a;a=new G("sans-serif",J(this.a));a= O(a);this.m.a.style.cssText=a;N(this.g);N(this.h);N(this.j);N(this.m)}var R={D:"serif",C:"sans-serif"},S=null;function T(){if(null===S){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);S=!!a&&(536>parseInt(a[1],10)||536===parseInt(a[1],10)&&11>=parseInt(a[2],10))}return S}Q.prototype.start=function(){this.f.serif=this.j.a.offsetWidth;this.f["sans-serif"]=this.m.a.offsetWidth;this.A=q();U(this)}; -function la(a,b,c){for(var d in R)if(R.hasOwnProperty(d)&&b===a.f[R[d]]&&c===a.f[R[d]])return!0;return!1}function U(a){var b=a.g.a.offsetWidth,c=a.h.a.offsetWidth,d;(d=b===a.f.serif&&c===a.f["sans-serif"])||(d=T()&&la(a,b,c));d?q()-a.A>=a.w?T()&&la(a,b,c)&&(null===a.u||a.u.hasOwnProperty(a.a.c))?V(a,a.v):V(a,a.B):ma(a):V(a,a.v)}function ma(a){setTimeout(p(function(){U(this)},a),50)}function V(a,b){setTimeout(p(function(){v(this.g.a);v(this.h.a);v(this.j.a);v(this.m.a);b(this.a)},a),0)};function W(a,b,c){this.c=a;this.a=b;this.f=0;this.m=this.j=!1;this.s=c}var X=null;W.prototype.g=function(a){var b=this.a;b.g&&w(b.f,[b.a.c("wf",a.c,J(a).toString(),"active")],[b.a.c("wf",a.c,J(a).toString(),"loading"),b.a.c("wf",a.c,J(a).toString(),"inactive")]);K(b,"fontactive",a);this.m=!0;na(this)}; +function la(a,b,c){for(var d in R)if(R.hasOwnProperty(d)&&b===a.f[R[d]]&&c===a.f[R[d]])return!0;return!1}function U(a){var b=a.g.a.offsetWidth,c=a.h.a.offsetWidth,d;(d=b===a.f.serif&&c===a.f["sans-serif"])||(d=T()&&la(a,b,c));d?q()-a.A>=a.w?T()&&la(a,b,c)&&(null===a.u||a.u.hasOwnProperty(a.a.c))?V(a,a.v):V(a,a.B):ma(a):V(a,a.v)}function ma(a){setTimeout(p(function(){U(this)},a),50)}function V(a,b){setTimeout(p(function(){v(this.g.a);v(this.h.a);v(this.j.a);v(this.m.a);b(this.a)},a),0)};function W(a,b,c){this.c=a;this.a=b;this.f=0;this.m=this.j=!1;this.o=c}var X=null;W.prototype.g=function(a){var b=this.a;b.g&&w(b.f,[b.a.c("wf",a.c,J(a).toString(),"active")],[b.a.c("wf",a.c,J(a).toString(),"loading"),b.a.c("wf",a.c,J(a).toString(),"inactive")]);K(b,"fontactive",a);this.m=!0;na(this)}; W.prototype.h=function(a){var b=this.a;if(b.g){var c=y(b.f,b.a.c("wf",a.c,J(a).toString(),"active")),d=[],e=[b.a.c("wf",a.c,J(a).toString(),"loading")];c||d.push(b.a.c("wf",a.c,J(a).toString(),"inactive"));w(b.f,d,e)}K(b,"fontinactive",a);na(this)};function na(a){0==--a.f&&a.j&&(a.m?(a=a.a,a.g&&w(a.f,[a.a.c("wf","active")],[a.a.c("wf","loading"),a.a.c("wf","inactive")]),K(a,"active")):L(a.a))};function oa(a){this.j=a;this.a=new ja;this.h=0;this.f=this.g=!0}oa.prototype.load=function(a){this.c=new ca(this.j,a.context||this.j);this.g=!1!==a.events;this.f=!1!==a.classes;pa(this,new ha(this.c,a),a)}; function qa(a,b,c,d,e){var f=0==--a.h;(a.f||a.g)&&setTimeout(function(){var a=e||null,m=d||null||{};if(0===c.length&&f)L(b.a);else{b.f+=c.length;f&&(b.j=f);var h,l=[];for(h=0;h