fixed next/font load on ALL pages and toast.

apps/web/components/layout.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import { Montserrat, Qwigley } from "next/font/google";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
@@ -10,20 +9,6 @@ import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { SubscriptionStatus } from "@prisma/client";
 import { useSession } from "next-auth/react";
 
-const montserrat = Montserrat({
-  subsets: ["latin"],
-  weight: ["400", "700"],
-  display: "swap",
-  variable: "--font-sans",
-});
-
-const qwigley = Qwigley({
-  subsets: ["latin"],
-  weight: ["400"],
-  display: "swap",
-  variable: "--font-qwigley",
-});
-
 function useRedirectToLoginIfUnauthenticated() {
   const { data: session, status } = useSession();
   const loading = status === "loading";
@@ -54,7 +39,7 @@ export default function Layout({ children }: any) {
 
   return (
     <>
-      <div className={`${montserrat.variable} min-h-full font-sans`}>
+      <div className="min-h-full">
         <Navigation />
 
         <main>

apps/web/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
+import { Montserrat, Qwigley } from "next/font/google";
 import { SubscriptionProvider } from "@documenso/lib/stripe/providers/subscription-provider";
 import "../../../node_modules/placeholder-loading/src/scss/placeholder-loading.scss";
 import "../../../node_modules/react-resizable/css/styles.css";
@@ -11,6 +12,20 @@ import "react-tooltip/dist/react-tooltip.css";
 
 export { coloredConsole } from "@documenso/lib";
 
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  display: "swap",
+  variable: "--font-sans",
+});
+
+const qwigley = Qwigley({
+  subsets: ["latin"],
+  weight: ["400"],
+  display: "swap",
+  variable: "--font-qwigley",
+});
+
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
@@ -27,8 +42,10 @@ export default function App({
   return (
     <SessionProvider session={session}>
       <SubscriptionProvider initialSubscription={initialSubscription}>
-        <Toaster position="top-center" />
-        {getLayout(<Component {...pageProps} />)}
+        <div className={`${montserrat.variable} font-sans`}>
+          <Toaster position="top-center" />
+          {getLayout(<Component {...pageProps} />)}
+        </div>
       </SubscriptionProvider>
     </SessionProvider>
   );