Merge pull request #5058 from Sage/fonts

docs(chromatic): remove webfontloader

.storybook/withThemeProvider.js

@@ -11,7 +11,6 @@ import {
   sageTheme,
 } from "../src/style/themes";
 import { config } from "react-transition-group";
-import WebFont from "webfontloader";
 
 const themes = [mintTheme, aegeanTheme, noTheme, sageTheme].reduce(
   (themesObject, theme) => {
@@ -59,22 +58,35 @@ const withThemeProvider = makeDecorator({
     // Disable transitions
     config.disabled = isChromaticBuild;
 
-    // Only render the story once the fonts are loaded
-    const [loading, setLoading] = useState(true);
+    const shouldLoadFonts = isChromatic() && document.fonts;
+    const [loading, setLoading] = useState(shouldLoadFonts);
+
     useEffect(() => {
-      WebFont.load({
-        custom: {
-          families: ["CarbonIcons", "Sage UI:n4,n7,n9"],
-        },
-        classes: false,
-        active: () => setLoading(false),
-        inactive: () => setLoading(new Error("Unable to load font files.")),
-      });
-    }, []);
+      if (!shouldLoadFonts) {
+        return null;
+      }
 
-    if (loading instanceof Error) {
-      throw loading;
-    }
+      const fonts = [
+        "400 1em Sage UI",
+        "700 1em Sage UI",
+        "900 1em Sage UI",
+        "1em CarbonIcons",
+      ];
+
+      // These fonts are pre-loaded but we want to wait until they're finished loading
+      Promise.all(fonts.map((fontName) => document.fonts.load(fontName))).then(
+        (results) => {
+          const firstError = results.findIndex((r) => r.length === 0);
+          if (firstError >= 0) {
+            setLoading(() => {
+              throw new Error(`Font "${fonts[firstError]}" failed to load.`);
+            });
+          } else {
+            setLoading(false);
+          }
+        }
+      );
+    }, []);
 
     if (loading) {
       return null;

docs/getting-started.stories.mdx

@@ -107,18 +107,6 @@ The `Sage UI` font files themselves are loaded via a public CDN under [license](
 </head>
 ```
 
-##### Webfont Loader
-
-While not required, we also recommend using [`webfontloader`](https://github.com/typekit/webfontloader#custom). This allows you to know when the fonts have finished loading. Once loaded you can render without risking a flash of unstyled text.
-
-```js
-WebFont.load({
-  custom: {
-    families: ["CarbonIcons", "Sage UI"],
-  },
-});
-```
-
 #### React and React DOM
 
 React and React DOM are imported from the [React library](https://reactjs.org/), which forms the basis for Carbon's components.

package.json

@@ -159,7 +159,6 @@
     "typescript": "^4.6.2",
     "typescript-to-proptypes": "^2.2.1",
     "uuid": "^8.3.2",
-    "webfontloader": "^1.6.28",
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {