refactor font loaders/declarations

lib/helpers/styles.ts

@@ -0,0 +1,14 @@
+import hash from "@emotion/hash";
+
+// a little hacky-hack to have react combine all of these css var declarations into a single <style> tag up top. see:
+// https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
+export const setRootCssVariables = (vars: Record<string, string>) => {
+  const root = Object.entries(vars)
+    .map(([key, value]) => `--${key}:${value}`)
+    .join(";");
+
+  return {
+    href: hash(root),
+    dangerouslySetInnerHTML: { __html: `:root{${root}}` },
+  };
+};