Replace FontProvider with CSS variable on html

- Since `FontProvider` relies on `styled-jsx` which is client-only, inject the `--next-font` variable to `RootLayout`'s `html` element which maintains compatibility with Bootstrap's reboot
HackAtUCI · Oct 5, 2023 · b7b4ccd · b7b4ccd
1 parent bf17f58
commit b7b4ccd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 24 deletions.
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
-
-import FontProvider from "@/lib/FontProvider";
+import { Fuzzy_Bubbles } from "next/font/google";
 
 import NavBar from "@/components/NavBar/NavBar";
 import Footer from "@/components/Footer/Footer";
@@ -12,14 +11,19 @@ export const metadata: Metadata = {
  description: "Hack at UCI's premier hackathon for beginners at UCI",
 };
 
+const fuzzy = Fuzzy_Bubbles({
+ weight: ["400", "700"],
+ subsets: ["latin"],
+ variable: "--next-font-fuzzy-bubbles",
+});
+
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  return (
- <html lang="en">
- <FontProvider />
+ <html lang="en" className={fuzzy.variable}>
  <body className="background">
  <NavBar />
  <main>{children}</main>

diff --git a/apps/site/src/lib/FontProvider.tsx b/apps/site/src/lib/FontProvider.tsx