From 007fe44db80cc8b7ee39b8c3ad870cf5890ace9e Mon Sep 17 00:00:00 2001
From: Doug Andrade <contact@dougandrade.com>
Date: Mon, 29 May 2023 22:25:36 -0400
Subject: [PATCH 1/3] loading fonts with next/font

---
 apps/web/components/layout.tsx | 19 +++++++++++++++++--
 apps/web/styles/tailwind.css   | 32 --------------------------------
 apps/web/tailwind.config.js    |  4 ++--
 3 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/apps/web/components/layout.tsx b/apps/web/components/layout.tsx
index 06a5bb2de..d9e8922e2 100644
--- a/apps/web/components/layout.tsx
+++ b/apps/web/components/layout.tsx
@@ -1,13 +1,28 @@
 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";
 import { useSubscription } from "@documenso/lib/stripe";
+import { BillingWarning } from "./billing-warning";
 import Navigation from "./navigation";
 import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { SubscriptionStatus } from "@prisma/client";
 import { useSession } from "next-auth/react";
-import { BillingWarning } from "./billing-warning";
+
+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();
@@ -39,7 +54,7 @@ export default function Layout({ children }: any) {
 
   return (
     <>
-      <div className="min-h-full">
+      <div className={`${montserrat.variable} min-h-full font-sans`}>
         <Navigation />
 
         <main>
diff --git a/apps/web/styles/tailwind.css b/apps/web/styles/tailwind.css
index 2ea56f9bf..fcae13ac3 100644
--- a/apps/web/styles/tailwind.css
+++ b/apps/web/styles/tailwind.css
@@ -6,35 +6,3 @@
   min-height: 100%;
 }
 
-html,
-body,
-:host {
-  font-family: montserrat;
-}
-
-@font-face {
-  font-family: "Qwigley";
-  src: url("/fonts/Qwigley-Regular.ttf");
-}
-
-/* latin */
-@font-face {
-  font-family: "Montserrat";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("/fonts/montserrat.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* latin */
-@font-face {
-  font-family: "Montserrat";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("/fonts/montserrat.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index bc846ebb5..ee8e474dc 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -12,8 +12,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        monteserrat: ["Monteserrat", "serif"],
-        qwigley: ["Qwigley", "serif"],
+        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
+        qwigley: ["var(--font-qwigley)", "serif"],
       },
       colors: {
         neon: {

From 3e944914744c3696d650295beac18a8703d0a846 Mon Sep 17 00:00:00 2001
From: Doug Andrade <contact@dougandrade.com>
Date: Tue, 30 May 2023 02:17:34 -0400
Subject: [PATCH 2/3] fixed next/font load on ALL pages and toast.

---
 apps/web/components/layout.tsx | 17 +----------------
 apps/web/pages/_app.tsx        | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/web/components/layout.tsx b/apps/web/components/layout.tsx
index d9e8922e2..aa0fad8dc 100644
--- a/apps/web/components/layout.tsx
+++ b/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>
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index cd5541cbb..866b742c3 100644
--- a/apps/web/pages/_app.tsx
+++ b/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>
   );

From 307b0cc9d9cb2b82e18f508868e744d26cf1cf3f Mon Sep 17 00:00:00 2001
From: Doug Andrade <contact@dougandrade.com>
Date: Tue, 30 May 2023 02:36:43 -0400
Subject: [PATCH 3/3] fixed height on login/signup pages

---
 apps/web/pages/_app.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 866b742c3..a1193a681 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -42,10 +42,10 @@ export default function App({
   return (
     <SessionProvider session={session}>
       <SubscriptionProvider initialSubscription={initialSubscription}>
-        <div className={`${montserrat.variable} font-sans`}>
+        <main className={`${montserrat.variable} h-full font-sans`}>
           <Toaster position="top-center" />
           {getLayout(<Component {...pageProps} />)}
-        </div>
+        </main>
       </SubscriptionProvider>
     </SessionProvider>
   );