feat: add better subsetting for variable fonts, use zeit for static a…

…pi (#641)

* feat: add better subsetting for variable fonts, try zeit for static api

* fix: unicode ranges

* fix: unicode ranges strings

* fix: unicode mapping

* feat: add font preloading

* fix: preload crossorigin

* fix: crossorigin attr

* fix: move mono to link

* chore: add fonts to now deployment

* fix: use fallback to prevent fout

* fix: use swap

* feat: add mono and remove google fonts

* fix: preload src

* fix: fallback example

* fix: nope

fonts/subset.sh

@@ -0,0 +1,20 @@
+LATIN="U+0020-00FF"
+LATINEXT="U+0100-024F"
+GREEK="U+0370-03FF"
+CYR="U+0400-04FF"
+CYREXT="U+0500-052F"
+ARROWS="U2191-21c6"
+
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --unicodes=$LATIN --flavor="woff2" --output-file=IBMPlexSansLatin-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --unicodes=$LATINEXT --flavor="woff2" --output-file=IBMPlexSansLatinExt-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --unicodes=$VIETNAMESE --flavor="woff2" --output-file=IBMPlexSansVietnamese-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --unicodes=$GREEK --flavor="woff2" --output-file=IBMPlexSansGreek-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --unicodes=$CYR --flavor="woff2" --output-file=IBMPlexSansCyr-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --unicodes=$CYREXT --flavor="woff2" --output-file=IBMPlexSansCyrExt-Italic-VF.woff2;
+
+pyftsubset src/IBMPlexSans-VF.ttf --unicodes=$LATIN,$ARROWS --flavor="woff2" --output-file=IBMPlexSansLatin-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --unicodes=$LATINEXT --flavor="woff2" --output-file=IBMPlexSansLatinExt-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --unicodes=$VIETNAMESE --flavor="woff2" --output-file=IBMPlexSansVietnamese-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --unicodes=$GREEK --flavor="woff2" --output-file=IBMPlexSansGreek-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --unicodes=$CYR --flavor="woff2" --output-file=IBMPlexSansCyr-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --unicodes=$CYREXT --flavor="woff2" --output-file=IBMPlexSansCyrExt-VF.woff2;

now.json

@@ -10,6 +10,10 @@
       "config": {
         "distDir": "packages/example/public"
       }
+    },
+    {
+      "src": "fonts/**/*.{woff2,ttf}",
+      "use": "@now/static"
     }
   ]
 }

packages/gatsby-theme-carbon/gatsby-config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const { uiBackground, interactive01 } = require('@carbon/elements');
-const remarkSlug = require('remark-slug');
 const defaultLunrOptions = require('./config/lunr-options');
 
 module.exports = themeOptions => {

packages/gatsby-theme-carbon/gatsby-ssr.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 /* eslint-disable react/no-danger */
 import React from 'react';
 import wrapRoot from './src/util/wrap-root-element';
@@ -28,6 +29,14 @@ export const onRenderBody = ({ setHeadComponents, setBodyAttributes }) => {
   `;
 
   return setHeadComponents([
+    <link
+      key="sans"
+      rel="preload"
+      href="https://fonts.carbon-design-system.now.sh/IBMPlexSansLatin-VF.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+    />,
     <script
       key="scroll-loader-script"
       dangerouslySetInnerHTML={{ __html: script }}

packages/gatsby-theme-carbon/src/styles/internal/_plex.scss

@@ -1,36 +1,202 @@
-@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap');
+// roman
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0020-00FF, U+2191-21c6;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatin-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatin-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0100-024F;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatinExt-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatinExt-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0370-03FF;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansGreek-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansGreek-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
 
 @font-face {
   font-family: 'IBM Plex Sans VF';
-  font-display: fallback;
-  src: url('./fonts/IBMPlexSans-VF.woff2') format('woff2-variations'),
-    url('./fonts/IBMPlexSans-VF.woff2') format('woff2');
+  unicode-range: U+0400-04FF;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyr-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyr-VF.woff2')
+      format('woff2');
   font-weight: 100 900;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'IBM Plex Sans VF';
-  font-display: fallback;
-  src: url('./fonts/IBMPlexSans-Italic-VF.woff2') format('woff2-variations'),
-    url('./fonts/IBMPlexSans-Italic-VF.woff2') format('woff2');
+  unicode-range: U+0500-052F;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyrExt-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyrExt-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+// italic
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0020-00FF;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatin-Italic-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatin-Italic-VF.woff2')
+      format('woff2');
   font-weight: 100 900;
   font-style: italic;
 }
 
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0100-024F;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatinExt-Italic-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansLatinExt-Italic-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0370-03FF;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansGreek-Italic-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansGreek-Italic-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0400-04FF;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyr-Italic-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyr-Italic-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'IBM Plex Sans VF';
+  unicode-range: U+0500-052F;
+  font-display: swap;
+  src: url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyrExt-Italic-VF.woff2')
+      format('woff2-variations'),
+    url('https://fonts.carbon-design-system.now.sh/IBMPlexSansCyrExt-Italic-VF.woff2')
+      format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+// Mono
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('https://fonts.carbon-design-system.now.sh/mono/IBMPlexMono-Regular-Latin1.woff2')
+      format('woff2');
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131,
+    U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E,
+    U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122,
+    U+2212, U+FB01-FB02;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('https://fonts.carbon-design-system.now.sh/mono/IBMPlexMono-Regular-Latin2.woff2')
+      format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF,
+    U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('https://fonts.carbon-design-system.now.sh/mono/IBMPlexMono-Regular-Latin3.woff2')
+      format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('https://fonts.carbon-design-system.now.sh/mono/IBMPlexMono-Regular-Pi.woff2')
+      format('woff2');
+  unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083,
+    U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E,
+    U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4,
+    U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248,
+    U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1-EBE7,
+    U+ECE0, U+EFCC;
+}
+
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('https://fonts.carbon-design-system.now.sh/mono/IBMPlexMono-Regular-Cyrillic.woff2')
+      format('woff2');
+  unicode-range: U+0400-045F, U+0472-0473, U+0490-049D, U+04A0-04A5, U+04AA-04AB,
+    U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9,
+    U+04EE-04F5, U+04F8-04F9;
+}
+
+// Fallback
 @font-face {
   font-family: 'IBM Plex Sans';
-  font-display: fallback;
+  font-display: swap;
   src: url('./fonts/IBMPlexSans.woff') format('woff');
 }
 
 @font-face {
   font-family: 'IBM Plex Sans';
-  font-display: fallback;
+  font-display: swap;
   src: url('./fonts/IBMPlexSans-SemiBold.woff');
   font-weight: 600;
 }
 
+// IE 11 support
 body {
   font-size: 1em;
   line-height: 1.5;