fix(font): use gatsby for static file hosting (#1281)

* fix(font): use gatsby for static file hosting Set up static file hosting natively through Gatsby rather than deploy platform. * chore: remove vercel files
carbon-design-system · Nov 21, 2022 · d012c62 · d012c62
1 parent 2ce1f9e
commit d012c62
Show file tree

Hide file tree

Showing 18 changed files with 31 additions and 58 deletions.
diff --git a/.nowignore b/.nowignore
diff --git a/packages/example/static/fonts/IBMPlexSansLatin-Italic-VF.woff2 b/packages/example/static/fonts/IBMPlexSansLatin-Italic-VF.woff2
diff --git a/packages/example/static/fonts/IBMPlexSansLatin-VF.woff2 b/packages/example/static/fonts/IBMPlexSansLatin-VF.woff2
diff --git a/packages/example/static/fonts/IBMPlexSansLatinExt-Italic-VF.woff2 b/packages/example/static/fonts/IBMPlexSansLatinExt-Italic-VF.woff2
diff --git a/packages/example/static/fonts/IBMPlexSansLatinExt-VF.woff2 b/packages/example/static/fonts/IBMPlexSansLatinExt-VF.woff2
diff --git a/packages/example/static/fonts/IBMPlexSansOther-Italic-VF.woff2 b/packages/example/static/fonts/IBMPlexSansOther-Italic-VF.woff2
diff --git a/packages/example/static/fonts/IBMPlexSansOther-VF.woff2 b/packages/example/static/fonts/IBMPlexSansOther-VF.woff2
diff --git a/packages/example/static/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2 b/packages/example/static/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2
diff --git a/packages/example/static/fonts/mono/IBMPlexMono-Regular-Latin1.woff2 b/packages/example/static/fonts/mono/IBMPlexMono-Regular-Latin1.woff2
diff --git a/packages/example/static/fonts/mono/IBMPlexMono-Regular-Latin2.woff2 b/packages/example/static/fonts/mono/IBMPlexMono-Regular-Latin2.woff2
diff --git a/packages/example/static/fonts/mono/IBMPlexMono-Regular-Latin3.woff2 b/packages/example/static/fonts/mono/IBMPlexMono-Regular-Latin3.woff2
diff --git a/packages/example/static/fonts/mono/IBMPlexMono-Regular-Pi.woff2 b/packages/example/static/fonts/mono/IBMPlexMono-Regular-Pi.woff2
diff --git a/packages/example/static/fonts/src/IBMPlexSans-Italic-VF.ttf b/packages/example/static/fonts/src/IBMPlexSans-Italic-VF.ttf
diff --git a/packages/example/static/fonts/src/IBMPlexSans-VF.ttf b/packages/example/static/fonts/src/IBMPlexSans-VF.ttf
diff --git a/packages/example/static/fonts/subset.sh b/packages/example/static/fonts/subset.sh
@@ -0,0 +1,12 @@
+LATIN="U+0020-00FF"
+LATINEXT="U+0100-1EF9"
+PUNCTUATION="U+2000-FB02"
+ARROWS="U+2190-21c6"
+
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --passthrough-tables --layout-features+="*" --unicodes=$LATIN --flavor="woff2" --ignore-missing-glyphs --output-file=IBMPlexSansLatin-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --passthrough-tables --layout-features+="*" --unicodes=$LATINEXT --flavor="woff2" --ignore-missing-glyphs --output-file=IBMPlexSansLatinExt-Italic-VF.woff2;
+pyftsubset src/IBMPlexSans-Italic-VF.ttf --passthrough-tables --layout-features+="*" --unicodes=$PUNCTUATION --flavor="woff2" --ignore-missing-glyphs --output-file=IBMPlexSansOther-Italic-VF.woff2;
+
+pyftsubset src/IBMPlexSans-VF.ttf --passthrough-tables --layout-features+="*" --unicodes=$LATIN,$ARROWS --flavor="woff2" --ignore-missing-glyphs --output-file=IBMPlexSansLatin-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --passthrough-tables --layout-features+="*" --unicodes=$LATINEXT --flavor="woff2" --ignore-missing-glyphs --output-file=IBMPlexSansLatinExt-VF.woff2;
+pyftsubset src/IBMPlexSans-VF.ttf --passthrough-tables --layout-features+="*" --unicodes=$PUNCTUATION --flavor="woff2" --ignore-missing-glyphs --output-file=IBMPlexSansOther-VF.woff2;
diff --git a/packages/gatsby-theme-carbon/gatsby-ssr.js b/packages/gatsby-theme-carbon/gatsby-ssr.js
@@ -32,10 +32,10 @@ export const onRenderBody = ({ setHeadComponents, setBodyAttributes }) => {
     <link
       key="sans"
       rel="preload"
-      href="https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2"
+      href="/fonts/IBMPlexSansLatin-VF.woff2"
       as="font"
       type="font/woff2"
-      crossOrigin=""
+      crossOrigin="anonymous"
     />,
     <script
       key="scroll-loader-script"

diff --git a/packages/gatsby-theme-carbon/src/styles/internal/_plex.scss b/packages/gatsby-theme-carbon/src/styles/internal/_plex.scss
@@ -7,10 +7,8 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0020-00FF;
   font-display: swap;
-  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2')
-      format('woff2-variations'),
-    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-VF.woff2')
-      format('woff2');
+  src: url('/fonts/IBMPlexSansLatin-VF.woff2') format('woff2-variations'),
+    url('/fonts/IBMPlexSansLatin-VF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
 }
@@ -19,10 +17,8 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0100-1EF9;
   font-display: swap;
-  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-VF.woff2')
-      format('woff2-variations'),
-    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-VF.woff2')
-      format('woff2');
+  src: url('/fonts/IBMPlexSansLatinExt-VF.woff2') format('woff2-variations'),
+    url('/fonts/IBMPlexSansLatinExt-VF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
 }
@@ -31,10 +27,8 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+2000-FB02;
   font-display: swap;
-  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-VF.woff2')
-      format('woff2-variations'),
-    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-VF.woff2')
-      format('woff2');
+  src: url('/fonts/IBMPlexSansOther-VF.woff2') format('woff2-variations'),
+    url('/fonts/IBMPlexSansOther-VF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
 }
@@ -44,10 +38,8 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0020-00FF;
   font-display: swap;
-  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-Italic-VF.woff2')
-      format('woff2-variations'),
-    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatin-Italic-VF.woff2')
-      format('woff2');
+  src: url('/fonts/IBMPlexSansLatin-Italic-VF.woff2') format('woff2-variations'),
+    url('/fonts/IBMPlexSansLatin-Italic-VF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
 }
@@ -56,10 +48,9 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+0100-1EF9;
   font-display: swap;
-  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
+  src: url('/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
       format('woff2-variations'),
-    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansLatinExt-Italic-VF.woff2')
-      format('woff2');
+    url('/fonts/IBMPlexSansLatinExt-Italic-VF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
 }
@@ -68,10 +59,8 @@
   font-family: 'IBM Plex Sans VF';
   unicode-range: U+2000-FB02;
   font-display: swap;
-  src: url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-Italic-VF.woff2')
-      format('woff2-variations'),
-    url('https://gatsby.carbondesignsystem.com/fonts/IBMPlexSansOther-Italic-VF.woff2')
-      format('woff2');
+  src: url('/fonts/IBMPlexSansOther-Italic-VF.woff2') format('woff2-variations'),
+    url('/fonts/IBMPlexSansOther-Italic-VF.woff2') format('woff2');
   font-weight: 100 900;
   font-style: italic;
 }
@@ -82,8 +71,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin1.woff2')
-      format('woff2');
+    url('/fonts/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,
@@ -95,8 +83,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin2.woff2')
-      format('woff2');
+    url('/fonts/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;
 }
@@ -106,8 +93,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Latin3.woff2')
-      format('woff2');
+    url('/fonts/mono/IBMPlexMono-Regular-Latin3.woff2') format('woff2');
   unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
 
@@ -116,8 +102,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Pi.woff2')
-      format('woff2');
+    url('/fonts/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,
@@ -131,8 +116,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('IBM Plex Mono'), local('IBMPlexMono'),
-    url('https://gatsby.carbondesignsystem.com/fonts/mono/IBMPlexMono-Regular-Cyrillic.woff2')
-      format('woff2');
+    url('/fonts/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;

diff --git a/vercel.json b/vercel.json