feat(type): add font-display setting to enhance font loading experience
MODIFY
packages/type/scss/font-face/_mono.scss
packages/type/scss/font-face/_mono.scss
// LICENSE file in the root directory of this source tree.
//
+@import 'settings';
+
@mixin carbon--font-face-mono {
// .woff support for IE11
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoW.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1Xdm.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoW.woff)
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFhA.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q0Q.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFhA.woff)
format('woff');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jcoQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1hMoQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1j8oQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1jsoQPttoz6Pz.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light Italic'), local('IBMPlexMono-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSflV1gMoQPttozw.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2HdgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa0XdgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa2ndgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa23dgregdFOFh.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Italic'), local('IBMPlexMono-Italic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6pfjptAgt5VM-kVkqdyU8n1ioa1XdgregdFA.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jcoQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1hMoQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1j8oQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1jsoQPttoz6Pz.woff2)
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold Italic'),
local('IBMPlexMono-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6sfjptAgt5VM-kVkqdyU8n1ioSClN1gMoQPttozw.woff2)
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl1FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlRFgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl9FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwl5FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3oQIwlBFgsAXHNk.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono'), local('IBMPlexMono'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl1FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlRFgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl9FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgsAXHNlYzg.woff2)
format('woff2');
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexmono/v4/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2)
format('woff2');

MODIFY
packages/type/scss/font-face/_sans.scss
packages/type/scss/font-face/_sans.scss
// LICENSE file in the root directory of this source tree.
//
+@import 'settings';
+
@mixin carbon--font-face-sans {
// .woff support for IE11
@font-face {
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfo.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZP.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfo.woff)
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFscg.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff)
format('woff');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRce_fuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRccvfuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdffuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRceffuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcePfuJGl18QRY.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmvIRcdvfuJGl18Q.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGqZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuE6ZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuFKZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGKZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuGaZJW9XjDlN8.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX-KVElMYYaJe8bpLHnCwDKhdTuF6ZJW9XjDg.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJce_fuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJccvfuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdffuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJceffuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcePfuJGl18QRY.woff2)
font-family: 'IBM Plex Sans';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold Italic'),
local('IBMPlexSans-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX7KVElMYYaJe8bpLHnCwDKhdTmyIJcdvfuJGl18Q.woff2)
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIxsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIVsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIJsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI5sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AI9sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjXr8AIFsdP3pBms.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdXeFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdLeFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd7eFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhd_eFaxOedfTDw.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans'), local('IBMPlexSans'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeFaxOedc.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIxsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIVsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIJsdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI5sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AI9sdP3pBmtF8A.woff2)
format('woff2');
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFsdP3pBms.woff2)
format('woff2');

MODIFY
packages/type/scss/font-face/_serif.scss
packages/type/scss/font-face/_serif.scss
// LICENSE file in the root directory of this source tree.
//
+@import 'settings';
+
@mixin carbon--font-face-serif {
// .woff support for IE11
@font-face {
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npiw.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTiA.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npiw.woff)
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q10.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zE.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q10.woff)
format('woff');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1TpjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm13pjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1bpjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1fpjfGj7oaMBg.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light Italic'), local('IBMPlexSerif-LightItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa454xm1npjfGj7oY.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zgTjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zETjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zoTjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zsTjnTLgNuZ5w.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Italic'), local('IBMPlexSerif-Italic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizBREVNn1dOx-zrZ2X3pZvkTiUa6zUTjnTLgNs.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1TpjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m13pjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1bpjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1fpjfGj7oaMBg.woff2)
font-family: 'IBM Plex Serif';
font-style: italic;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold Italic'),
local('IBMPlexSerif-SemiBoldItalic'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizGREVNn1dOx-zrZ2X3pZvkTiUa4-o3m1npjfGj7oY.woff2)
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI5q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SIwq1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI7q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI6q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 300;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif Light'), local('IBMPlexSerif-Light'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi20-SI0q1vjitOh.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUb2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUQ2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUR2zcZiVbJsNo.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif'), local('IBMPlexSerif'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizDREVNn1dOx-zrZ2X3pZvkTiUf2zcZiVbJ.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI5q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yIwq1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI7q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI6q1vjitOh3oc.woff2)
format('woff2');
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
+ font-display: $carbon--font-display;
src: local('IBM Plex Serif SemiBold'), local('IBMPlexSerif-SemiBold'),
url(https://fonts.gstatic.com/s/ibmplexserif/v7/jizAREVNn1dOx-zrZ2X3pZvkTi3A_yI0q1vjitOh.woff2)
format('woff2');

ADD
packages/type/scss/font-face/_settings.scss
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Defines how font files are loaded and displayed by the browser.
+// https://css-tricks.com/almanac/properties/f/font-display/
+$carbon--font-display: auto !default;

feat(type): add font-display setting to enhance font loading experience (#477)