feat: adds typography urls support (#7)

APISuite · Jun 1, 2021 · 9bfd3c6 · 9bfd3c6
1 parent 7f3915c
commit 9bfd3c6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/lib/Provider.tsx b/lib/Provider.tsx
@@ -11,6 +11,7 @@ import { ConfigContext } from "./context";
 import { defaultState, apiDefaults, fallbackLng, LOCALE_KEY } from "./constants";
 import useStyles from "./styles";
 import { ConfigProviderProps, ConfigState, Locale } from "./types";
+import { injectStylesheetLink } from "./util/injectStylesheetLink";
 
 export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children, api, translations, ...rest }) => {
   const classes = useStyles();
@@ -49,6 +50,13 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({ children, api, t
           responses.map((r) => r.json()),
         );
 
+        const fontUrls = theme?.typography?.urls;
+
+        // load fonts
+        if (Array.isArray(fontUrls)) {
+          fontUrls.forEach((url) => injectStylesheetLink(url));
+        }
+
         // create theme from API configurations
         appTheme.current = createMuiTheme(theme);
 

diff --git a/lib/util/injectStylesheetLink.ts b/lib/util/injectStylesheetLink.ts
@@ -0,0 +1,9 @@
+/** injects a link tag of rel stylesheet in the head of the document */
+export function injectStylesheetLink(url: string) {
+  const link = document.createElement("link");
+
+  link.rel= "stylesheet";
+  link.href = url;
+
+  document.head.appendChild(link);
+}