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: {