feat: consume Sage UI font from @sage/design-tokens package

Sage · Apr 21, 2022 · 1d27c5f · 1d27c5f
1 parent 110b90f
commit 1d27c5f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 45 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -8,23 +8,23 @@
 
 <link
   rel="preload"
-  href="https://fonts.sage.com/Sage_UI-Regular.woff2"
+  href="/static/media/sageui-regular.woff2"
   as="font"
   type="font/woff2"
   crossorigin="anonymous"
 />
 
 <link
   rel="preload"
-  href="https://fonts.sage.com/Sage_UI-Medium.woff2"
+  href="/static/media/sageui-medium.woff2"
   as="font"
   type="font/woff2"
   crossorigin="anonymous"
 />
 
 <link
   rel="preload"
-  href="https://fonts.sage.com/Sage_UI-Bold.woff2"
+  href="/static/media/sageui-bold.woff2"
   as="font"
   type="font/woff2"
   crossorigin="anonymous"

diff --git a/docs/getting-started.stories.mdx b/docs/getting-started.stories.mdx
@@ -81,31 +81,7 @@ The font face definitions for both fonts are included in Carbon and can be direc
 import "carbon-react/lib/style/fonts.css";
 ```
 
-The `Sage UI` font files themselves are loaded via a public CDN under [license](https://github.com/Sage/design-tokens/blob/master/license), so we recommend preloading these in your entry point HTML file to avoid a "flash of unstyled text".
-
-```html
-<head>
-  <!-- Preloading Sage UI fonts from CDN -->
-  <link
-    rel="preload"
-    as="font"
-    href="https://fonts.sage.com/Sage_UI-Regular.woff2"
-    crossorigin="anonymous"
-  />
-  <link
-    rel="preload"
-    as="font"
-    href="https://fonts.sage.com/Sage_UI-Medium.woff2"
-    crossorigin="anonymous"
-  />
-  <link
-    rel="preload"
-    as="font"
-    href="https://fonts.sage.com/Sage_UI-Bold.woff2"
-    crossorigin="anonymous"
-  />
-</head>
-```
+_Note the `Sage UI` font files themselves are loaded from the [@sage/design-tokens](https://github.com/Sage/design-tokens) library. If this has not been installed in your project beforehand, text will be rendered in the browser's default sans-serif font._
 
 #### React and React DOM
 
@@ -122,7 +98,7 @@ Carbon supports two theming systems - the latest which uses Design Tokens in for
 
 The themes available in Carbon include:
 
-- **sage** - the latest theme which uses Design Tokens in form of CSS custom properties. _Note this theme requires installation of `@sage/design-tokens` package, otherwise styles fallback to the old mint theme for compatability._
+- **sage** - the latest theme which uses Design Tokens in form of CSS custom properties. _Note this theme requires installation of `@sage/design-tokens` library, otherwise styles fallback to the old mint theme for compatability._
 - **mint**, **aegean** and **none** - legacy themes that use old theme properties consumed by ThemeProvider.
 
 #### Carbon Provider

diff --git a/src/style/fonts.css b/src/style/fonts.css
@@ -1,30 +1,36 @@
-@font-face{
-  font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Regular.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Regular.woff') format("woff");
-  font-weight: 400;
+@font-face {
+  font-family: "CarbonIcons";
+  src: url("./assets/carbon-icons-webfont.woff") format("woff");
+  font-weight: normal;
   font-style: normal;
-  font-display: swap;
 }
 
-@font-face{
+@font-face {
   font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Medium.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Medium.woff') format("woff");
-  font-weight: 700;
   font-style: normal;
-  font-display: swap;
+  font-weight: 400;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-regular.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.otf") format("opentype");
 }
 
-@font-face{
+@font-face {
   font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Bold.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Bold.woff') format("woff");
-  font-weight: 900;
   font-style: normal;
-  font-display: swap;
+  font-weight: 700;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "CarbonIcons";
-  src: url("./assets/carbon-icons-webfont.woff") format("woff");
-  font-weight: normal;
+  font-family: "Sage UI";
   font-style: normal;
+  font-weight: 900;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.otf") format("opentype");
 }