diff --git a/lib/Provider.tsx b/lib/Provider.tsx index a530936..a08e468 100644 --- 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 = ({ children, api, translations, ...rest }) => { const classes = useStyles(); @@ -49,6 +50,13 @@ export const ConfigProvider: React.FC = ({ 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 new file mode 100644 index 0000000..492f7a8 --- /dev/null +++ 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); +}