diff --git a/README.md b/README.md index 097b841e..97991f2b 100644 --- a/README.md +++ b/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. diff --git a/spec/modules/google/fontapiurlbuilder_spec.js b/spec/modules/google/fontapiurlbuilder_spec.js index 0ffecb72..14660f1b 100644 --- a/spec/modules/google/fontapiurlbuilder_spec.js +++ b/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'); + }); }); diff --git a/spec/modules/google/googlefontapi_spec.js b/spec/modules/google/googlefontapi_spec.js index 28a8f423..7fdfe5d2 100644 --- a/spec/modules/google/googlefontapi_spec.js +++ b/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) { diff --git a/src/modules/google/fontapiurlbuilder.js b/src/modules/google/fontapiurlbuilder.js index 8d1bec18..a473f514 100644 --- a/src/modules/google/fontapiurlbuilder.js +++ b/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; }; }); diff --git a/src/modules/google/googlefontapi.js b/src/modules/google/googlefontapi.js index 8f3e5a43..4c4b9a20 100644 --- a/src/modules/google/googlefontapi.js +++ b/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);