diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx
index ded4a5af34..841216a5e2 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPrompt.tsx
@@ -213,7 +213,7 @@ function RulesPromptForm({
           className={showExamples ? "sm:col-span-2" : ""}
         >
           <div className="flex items-center justify-between">
-            <Label className="font-cal text-xl leading-7">
+            <Label className="font-title text-xl leading-7">
               How your assistant should handle incoming emails
             </Label>
 
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx
index 87ad7dc838..5884299fff 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/RulesPromptNew.tsx
@@ -158,7 +158,9 @@ function RulesPromptForm({
               onSubmit();
             }}
           >
-            <Label className="font-cal text-xl leading-7">Add new rules</Label>
+            <Label className="font-title text-xl leading-7">
+              Add new rules
+            </Label>
 
             <div className="mt-1.5 space-y-2">
               <LoadingContent
@@ -208,7 +210,7 @@ function RulesPromptForm({
 
       {examples && (
         <div className="mt-2">
-          <Label className="font-cal text-xl leading-7">Examples</Label>
+          <Label className="font-title text-xl leading-7">Examples</Label>
           <div className="mt-1.5">
             <ExamplesGrid
               examples={examples}
diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/RulesTabNew.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/RulesTabNew.tsx
index 688449b15c..bd127dab8b 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/RulesTabNew.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/RulesTabNew.tsx
@@ -5,7 +5,7 @@ export function RulesTab() {
   return (
     <div>
       <div className="flex items-center mb-2">
-        <h3 className="font-cal text-xl flex-1">Your inbox rules</h3>
+        <h3 className="font-title text-xl flex-1">Your inbox rules</h3>
 
         <AddRuleDialog />
       </div>
diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 410594bf7e..a26d2d77ef 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -3,6 +3,7 @@ import type React from "react";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import { after } from "next/server";
+import { Inter } from "next/font/google";
 import { SideNavWithTopNav } from "@/components/SideNavWithTopNav";
 import { auth } from "@/utils/auth";
 import { PostHogIdentify } from "@/providers/PostHogProvider";
@@ -20,6 +21,14 @@ import { createScopedLogger } from "@/utils/logger";
 
 const logger = createScopedLogger("AppLayout");
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  weight: ["400", "500", "600", "700"], // font-normal, font-medium, font-semibold, font-bold
+  preload: true,
+  display: "swap",
+});
+
 export const viewport = {
   themeColor: "#FFF",
   // safe area for iOS PWA
@@ -58,20 +67,24 @@ export default async function AppLayout({
   });
 
   return (
-    <AppProviders>
-      <SideNavWithTopNav defaultOpen={!isClosed}>
-        <ErrorMessages />
-        {children}
-      </SideNavWithTopNav>
-      <EmailViewer />
-      <ErrorBoundary extra={{ component: "AppLayout" }}>
-        <PostHogIdentify />
+    <div className={inter.variable}>
+      <div className="font-inter">
+        <AppProviders>
+          <SideNavWithTopNav defaultOpen={!isClosed}>
+            <ErrorMessages />
+            {children}
+          </SideNavWithTopNav>
+          <EmailViewer />
+          <ErrorBoundary extra={{ component: "AppLayout" }}>
+            <PostHogIdentify />
 
-        <CommandK />
-        <QueueInitializer />
-        <AssessUser />
-        <SentryIdentify email={session.user.email} />
-      </ErrorBoundary>
-    </AppProviders>
+            <CommandK />
+            <QueueInitializer />
+            <AssessUser />
+            <SentryIdentify email={session.user.email} />
+          </ErrorBoundary>
+        </AppProviders>
+      </div>
+    </div>
   );
 }
diff --git a/apps/web/app/(app)/premium/Pricing.tsx b/apps/web/app/(app)/premium/Pricing.tsx
index 7a5b36da07..8f2fd28a3e 100644
--- a/apps/web/app/(app)/premium/Pricing.tsx
+++ b/apps/web/app/(app)/premium/Pricing.tsx
@@ -56,8 +56,10 @@ export default function Pricing(props: PricingProps) {
   const header = props.header || (
     <div className="mb-12">
       <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
-        <h2 className="font-cal text-base leading-7 text-blue-600">Pricing</h2>
-        <p className="mt-2 font-cal text-4xl text-gray-900 sm:text-5xl">
+        <h2 className="font-title text-base leading-7 text-blue-600">
+          Pricing
+        </h2>
+        <p className="mt-2 font-title text-4xl text-gray-900 sm:text-5xl">
           Try for free, affordable paid plans
         </p>
       </div>
@@ -208,7 +210,7 @@ function PriceTier({
             id={tier.name}
             className={cn(
               tier.mostPopular ? "text-blue-600" : "text-gray-900",
-              "font-cal text-lg leading-8",
+              "font-title text-lg leading-8",
             )}
           >
             {tier.name}
diff --git a/apps/web/app/(landing)/home/CTA.tsx b/apps/web/app/(landing)/home/CTA.tsx
index 93cc4a475d..af0c4d7d3a 100644
--- a/apps/web/app/(landing)/home/CTA.tsx
+++ b/apps/web/app/(landing)/home/CTA.tsx
@@ -17,7 +17,7 @@ export function CTA(props: { CTAComponent?: React.ComponentType }) {
         />
       </div> */}
       <div className="mx-auto max-w-2xl text-center">
-        <h2 className="font-cal text-3xl text-gray-900 sm:text-4xl">
+        <h2 className="font-title text-3xl text-gray-900 sm:text-4xl">
           Boost your productivity.
           <br />
           Start using Inbox Zero today.
diff --git a/apps/web/app/(landing)/home/FAQs.tsx b/apps/web/app/(landing)/home/FAQs.tsx
index 15e58ab908..0d873836d9 100644
--- a/apps/web/app/(landing)/home/FAQs.tsx
+++ b/apps/web/app/(landing)/home/FAQs.tsx
@@ -77,7 +77,7 @@ export function FAQs() {
       className="mx-auto max-w-2xl divide-y divide-gray-900/10 px-6 pb-8 sm:pb-24 sm:pt-12 lg:max-w-7xl lg:px-8 lg:pb-32"
       id="faq"
     >
-      <h2 className="font-cal text-2xl leading-10 text-gray-900">
+      <h2 className="font-title text-2xl leading-10 text-gray-900">
         Frequently asked questions
       </h2>
       <dl className="mt-10 space-y-8 divide-y divide-gray-900/10">
diff --git a/apps/web/app/(landing)/home/Features.tsx b/apps/web/app/(landing)/home/Features.tsx
index d15296993b..195843bc16 100644
--- a/apps/web/app/(landing)/home/Features.tsx
+++ b/apps/web/app/(landing)/home/Features.tsx
@@ -61,10 +61,10 @@ export function FeaturesWithImage({
             )}
           >
             <div className="lg:max-w-lg">
-              <h2 className="font-cal text-base leading-7 text-blue-600">
+              <h2 className="font-title text-base leading-7 text-blue-600">
                 {title}
               </h2>
-              <p className="mt-2 font-cal text-3xl text-gray-900 sm:text-4xl">
+              <p className="mt-2 font-title text-3xl text-gray-900 sm:text-4xl">
                 {subtitle}
               </p>
               <p className="mt-6 text-lg leading-8 text-gray-600">
diff --git a/apps/web/app/(landing)/home/Hero.tsx b/apps/web/app/(landing)/home/Hero.tsx
index b626e9879c..500a9d98cb 100644
--- a/apps/web/app/(landing)/home/Hero.tsx
+++ b/apps/web/app/(landing)/home/Hero.tsx
@@ -16,7 +16,7 @@ export function HeroText(props: {
 
   return (
     <h1
-      className={cn("font-cal text-4xl text-gray-900 sm:text-6xl", className)}
+      className={cn("font-title text-4xl text-gray-900 sm:text-6xl", className)}
       {...rest}
     />
   );
diff --git a/apps/web/app/(landing)/home/LogoCloud.tsx b/apps/web/app/(landing)/home/LogoCloud.tsx
index 1081db62ce..3420ed2a8b 100644
--- a/apps/web/app/(landing)/home/LogoCloud.tsx
+++ b/apps/web/app/(landing)/home/LogoCloud.tsx
@@ -3,7 +3,7 @@ import { userCount } from "@/utils/config";
 export function LogoCloud() {
   return (
     <div className="mx-auto mt-16 max-w-7xl px-6 lg:px-8">
-      <h2 className="text-center font-cal text-lg leading-8 text-gray-900">
+      <h2 className="text-center font-title text-lg leading-8 text-gray-900">
         Trusted by {userCount} productive users
       </h2>
 
diff --git a/apps/web/app/(landing)/home/Privacy.tsx b/apps/web/app/(landing)/home/Privacy.tsx
index 1262f3c04e..364dd2e420 100644
--- a/apps/web/app/(landing)/home/Privacy.tsx
+++ b/apps/web/app/(landing)/home/Privacy.tsx
@@ -25,10 +25,10 @@ export function Privacy() {
 
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:text-center">
-          <h2 className="font-cal text-base leading-7 text-blue-600">
+          <h2 className="font-title text-base leading-7 text-blue-600">
             Privacy first
           </h2>
-          <p className="mt-2 font-cal text-3xl text-gray-900 sm:text-4xl">
+          <p className="mt-2 font-title text-3xl text-gray-900 sm:text-4xl">
             Open Source. See exactly what our code does. Or host it yourself.
           </p>
           <p className="mt-6 text-lg leading-8 text-gray-600">
diff --git a/apps/web/app/(landing)/login/page.tsx b/apps/web/app/(landing)/login/page.tsx
index f06f13d62c..e137bc9e12 100644
--- a/apps/web/app/(landing)/login/page.tsx
+++ b/apps/web/app/(landing)/login/page.tsx
@@ -33,7 +33,7 @@ export default async function AuthenticationPage(props: {
     <div className="flex h-screen flex-col justify-center text-foreground">
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col text-center">
-          <h1 className="font-cal text-2xl text-foreground">Sign In</h1>
+          <h1 className="font-title text-2xl text-foreground">Sign In</h1>
           <p className="mt-4 text-muted-foreground">
             Your AI personal assistant for email.
           </p>
diff --git a/apps/web/app/(landing)/login/sso/page.tsx b/apps/web/app/(landing)/login/sso/page.tsx
index af3ec56a9e..4f9668a5bc 100644
--- a/apps/web/app/(landing)/login/sso/page.tsx
+++ b/apps/web/app/(landing)/login/sso/page.tsx
@@ -86,7 +86,7 @@ export default function SSOLoginPage() {
     <div className="flex h-screen flex-col justify-center text-foreground">
       <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
         <div className="flex flex-col text-center">
-          <h1 className="font-cal text-2xl text-foreground">SSO Sign In</h1>
+          <h1 className="font-title text-2xl text-foreground">SSO Sign In</h1>
           <p className="mt-4 text-muted-foreground">
             Sign in to your organization account
           </p>
diff --git a/apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx b/apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx
index e0c311d875..cf509463b3 100644
--- a/apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx
+++ b/apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx
@@ -10,12 +10,12 @@ export function WelcomeUpgradeHeader() {
   return (
     <div className="mb-8 flex flex-col items-start">
       <div className="mx-auto text-center">
-        <h2 className="font-cal text-base leading-7 text-blue-600">
+        <h2 className="font-title text-base leading-7 text-blue-600">
           Spend 50% less time on email
         </h2>
         {variant === "free-trial-emphasis" ? (
           <div>
-            <h1 className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
+            <h1 className="mt-2 font-title text-2xl text-gray-900 sm:text-3xl">
               Start your 7-day FREE trial
             </h1>
             <p className="mt-2 text-lg text-gray-900 sm:text-xl">
@@ -23,7 +23,7 @@ export function WelcomeUpgradeHeader() {
             </p>
           </div>
         ) : (
-          <h1 className="mt-2 font-cal text-2xl text-gray-900 sm:text-3xl">
+          <h1 className="mt-2 font-title text-2xl text-gray-900 sm:text-3xl">
             Join {userCount} users that use Inbox Zero
             <br />
             to be more productive!
diff --git a/apps/web/app/(marketing) b/apps/web/app/(marketing)
index c21d8eccc2..bda3ec5062 160000
--- a/apps/web/app/(marketing)
+++ b/apps/web/app/(marketing)
@@ -1 +1 @@
-Subproject commit c21d8eccc258ec00629c8ccfa7111f1f21a02bd6
+Subproject commit bda3ec5062f47306b9ea36ab2c37b04d61ebb9a9
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index ffd07b6049..20f630a053 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -6,7 +6,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { AxiomWebVitals } from "next-axiom";
 import { GoogleTagManager } from "@next/third-parties/google";
 import { Analytics as DubAnalytics } from "@dub/analytics/react";
-import { Inter, Geist } from "next/font/google";
+import { Geist } from "next/font/google";
 import localFont from "next/font/local";
 import type { WebApplication, WithContext } from "schema-dts";
 import "../styles/globals.css";
@@ -17,28 +17,16 @@ import { UTM } from "@/app/utm";
 import { startupImage } from "@/app/startup-image";
 import { Toaster } from "@/components/Toast";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-  preload: true,
-  display: "swap",
-});
-const calFont = localFont({
-  src: "../styles/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "swap",
-});
 const aeonikFont = localFont({
   src: "../styles/aeonik-medium.woff",
-  variable: "--font-aeonik",
+  variable: "--font-title",
   preload: true,
   display: "swap",
 });
 const geist = Geist({
   subsets: ["latin"],
   variable: "--font-geist",
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  weight: ["400", "500", "600", "700"], // font-normal, font-medium, font-semibold, font-bold
   display: "swap",
 });
 
@@ -142,7 +130,7 @@ export default async function RootLayout({
   return (
     <html lang="en" className="h-full" suppressHydrationWarning>
       <body
-        className={`h-full ${inter.variable} ${calFont.variable} ${aeonikFont.variable} ${geist.variable} font-sans antialiased`}
+        className={`h-full ${env.NEXT_PUBLIC_USE_AEONIK_FONT ? aeonikFont.variable : ""} ${geist.variable} font-sans antialiased`}
       >
         <Script
           id="json-ld"
diff --git a/apps/web/components/Celebration.tsx b/apps/web/components/Celebration.tsx
index a7a19fcefa..d3b54ee5ca 100644
--- a/apps/web/components/Celebration.tsx
+++ b/apps/web/components/Celebration.tsx
@@ -15,7 +15,7 @@ export function Celebration(props: { message: string }) {
 
   return (
     <>
-      <div className="flex items-center justify-center font-cal text-2xl text-primary">
+      <div className="flex items-center justify-center font-title text-2xl text-primary">
         Congrats! {props.message}
       </div>
       <div className="flex items-center justify-center">
diff --git a/apps/web/components/Typography.tsx b/apps/web/components/Typography.tsx
index 1595b1b962..a82e78e059 100644
--- a/apps/web/components/Typography.tsx
+++ b/apps/web/components/Typography.tsx
@@ -9,7 +9,7 @@ const PageHeading = forwardRef<
   <h1
     ref={ref}
     className={cn(
-      "font-cal text-2xl leading-7 text-primary dark:text-foreground sm:truncate lg:text-3xl",
+      "font-title text-2xl leading-7 text-primary dark:text-foreground sm:truncate lg:text-3xl",
       className,
     )}
     {...props}
@@ -35,7 +35,7 @@ const SectionHeader = forwardRef<
 >(({ className, ...props }, ref) => (
   <h4
     ref={ref}
-    className={cn("font-cal text-base leading-7 text-foreground", className)}
+    className={cn("font-title text-base leading-7 text-foreground", className)}
     {...props}
   />
 ));
@@ -74,7 +74,7 @@ const TypographyH3 = forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn("scroll-m-20 font-cal text-2xl", className)}
+    className={cn("scroll-m-20 font-title text-2xl", className)}
     {...props}
   />
 ));
@@ -84,7 +84,7 @@ const TypographyH4 = forwardRef<
   HTMLHeadingElement,
   React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h4 ref={ref} className={cn("font-cal text-lg", className)} {...props} />
+  <h4 ref={ref} className={cn("font-title text-lg", className)} {...props} />
 ));
 TypographyH4.displayName = "TypographyH4";
 
diff --git a/apps/web/components/assistant-chat/tools.tsx b/apps/web/components/assistant-chat/tools.tsx
index a47b1e1118..3231edde08 100644
--- a/apps/web/components/assistant-chat/tools.tsx
+++ b/apps/web/components/assistant-chat/tools.tsx
@@ -438,7 +438,7 @@ function ToolCardHeader({
 }) {
   return (
     <div className="flex items-center justify-between">
-      <h3 className="font-cal text-lg">{title}</h3>
+      <h3 className="font-title text-lg">{title}</h3>
       {actions}
     </div>
   );
diff --git a/apps/web/components/editor/SimpleRichTextEditor.tsx b/apps/web/components/editor/SimpleRichTextEditor.tsx
index b2a9a719e5..9039f2348d 100644
--- a/apps/web/components/editor/SimpleRichTextEditor.tsx
+++ b/apps/web/components/editor/SimpleRichTextEditor.tsx
@@ -91,7 +91,7 @@ export const SimpleRichTextEditor = forwardRef<
           class: cn(
             "p-3 max-w-none focus:outline-none max-w-none simple-rich-editor",
             "prose prose-sm",
-            "prose-headings:font-cal prose-headings:text-foreground",
+            "prose-headings:font-title prose-headings:text-foreground",
             "prose-p:text-foreground prose-li:text-foreground",
             "prose-strong:text-foreground prose-strong:font-semibold",
             "prose-ul:text-foreground prose-ol:text-foreground",
diff --git a/apps/web/components/email-list/EmailList.tsx b/apps/web/components/email-list/EmailList.tsx
index bd6fb549a8..ae1dfe18c2 100644
--- a/apps/web/components/email-list/EmailList.tsx
+++ b/apps/web/components/email-list/EmailList.tsx
@@ -133,7 +133,7 @@ export function List({
           {type === "inbox" ? (
             <Celebration message={"You made it to Inbox Zero!"} />
           ) : (
-            <div className="flex items-center justify-center font-cal text-2xl text-primary">
+            <div className="flex items-center justify-center font-title text-2xl text-primary">
               No emails to display
             </div>
           )}
diff --git a/apps/web/components/new-landing/common/BasicLayout.tsx b/apps/web/components/new-landing/common/BasicLayout.tsx
index 7733e3c02e..f32700d1b6 100644
--- a/apps/web/components/new-landing/common/BasicLayout.tsx
+++ b/apps/web/components/new-landing/common/BasicLayout.tsx
@@ -6,7 +6,7 @@ const LAYOUT_CLASSNAME = "max-w-6xl mx-auto px-6 lg:px-8 xl:px-0";
 
 export function BasicLayout(props: { children: React.ReactNode }) {
   return (
-    <div className="font-geist">
+    <div>
       <Header className={LAYOUT_CLASSNAME} />
       <main className={cn("isolate", LAYOUT_CLASSNAME)}>{props.children}</main>
       <Footer className={LAYOUT_CLASSNAME} />
diff --git a/apps/web/components/new-landing/common/Button.tsx b/apps/web/components/new-landing/common/Button.tsx
index 7057f0cd83..7628911f4a 100644
--- a/apps/web/components/new-landing/common/Button.tsx
+++ b/apps/web/components/new-landing/common/Button.tsx
@@ -26,7 +26,7 @@ export function Button({
 
   const buttonVariants = cva(
     [
-      "rounded-[13px] font-geist font-medium transition-all will-change-transform",
+      "rounded-[13px] font-medium transition-all will-change-transform",
       "flex items-center justify-center gap-2",
       variant === "primary" ? "" : "hover:scale-[1.04]",
     ],
diff --git a/apps/web/components/new-landing/common/Card.tsx b/apps/web/components/new-landing/common/Card.tsx
index 3760b29219..e3b7e8bd27 100644
--- a/apps/web/components/new-landing/common/Card.tsx
+++ b/apps/web/components/new-landing/common/Card.tsx
@@ -36,7 +36,7 @@ export function CardHeader({
       {title ? (
         <h2
           className={cx(
-            "font-aeonik text-xl leading-6",
+            "font-title text-xl leading-6",
             title || addon ? "mt-5" : "",
           )}
         >
diff --git a/apps/web/components/new-landing/common/Typography.tsx b/apps/web/components/new-landing/common/Typography.tsx
index 829cfe7192..ce7d248016 100644
--- a/apps/web/components/new-landing/common/Typography.tsx
+++ b/apps/web/components/new-landing/common/Typography.tsx
@@ -9,7 +9,7 @@ export function Heading({ children, className }: HeadingProps) {
   return (
     <h1
       className={cx(
-        "font-aeonik text-[#242424] text-[34px] sm:text-5xl md:text-6xl leading-tight",
+        "font-title text-[#242424] text-[34px] sm:text-5xl md:text-6xl leading-tight",
         className,
       )}
     >
@@ -60,7 +60,7 @@ export function Subheading({ children, className }: SubheadingProps) {
   return (
     <h2
       className={cx(
-        "font-aeonik text-[#242424] text-[1.7rem] md:text-[2.5rem] leading-tight",
+        "font-title text-[#242424] text-[1.7rem] md:text-[2.5rem] leading-tight",
         className,
       )}
     >
@@ -74,7 +74,6 @@ interface ParagraphProps {
   className?: string;
   color?: "default" | "light" | "dark" | "gray-700" | "gray-500" | "gray-900";
   size?: "default" | "xs" | "sm" | "md" | "lg";
-  family?: "default" | "geist";
   as?: "p" | "h3";
 }
 
@@ -83,7 +82,6 @@ export function Paragraph({
   className,
   color = "default",
   size = "default",
-  family = "default",
   as = "p",
 }: ParagraphProps) {
   const paragraphStyles = cva("", {
@@ -103,18 +101,12 @@ export function Paragraph({
         md: "text-base",
         lg: "text-lg",
       },
-      family: {
-        default: "",
-        geist: "font-geist",
-      },
     },
   });
   const ParagraphComponent = as as React.ElementType;
 
   return (
-    <ParagraphComponent
-      className={paragraphStyles({ color, size, family, className })}
-    >
+    <ParagraphComponent className={paragraphStyles({ color, size, className })}>
       {children}
     </ParagraphComponent>
   );
diff --git a/apps/web/components/new-landing/sections/FAQs.tsx b/apps/web/components/new-landing/sections/FAQs.tsx
index f9c0407b1c..9c3e362a19 100644
--- a/apps/web/components/new-landing/sections/FAQs.tsx
+++ b/apps/web/components/new-landing/sections/FAQs.tsx
@@ -78,7 +78,6 @@ export function FAQs() {
               >
                 <CardContent>
                   <Paragraph
-                    family="geist"
                     color="gray-900"
                     className="font-semibold tracking-tight mb-4"
                   >
diff --git a/apps/web/components/new-landing/sections/Pricing.tsx b/apps/web/components/new-landing/sections/Pricing.tsx
index 38714bf941..09a1362adc 100644
--- a/apps/web/components/new-landing/sections/Pricing.tsx
+++ b/apps/web/components/new-landing/sections/Pricing.tsx
@@ -180,7 +180,7 @@ function PricingCard({ tier, tierIndex, isAnnual, posthog }: PricingCardProps) {
                 </Paragraph>
               </>
             ) : (
-              <Subheading className="font-light">Contact us</Subheading>
+              <Subheading>Contact us</Subheading>
             )}
           </div>
           <Button auto size="lg" variant={tier.button.variant} asChild>
diff --git a/apps/web/components/ui/alert.tsx b/apps/web/components/ui/alert.tsx
index 81cc4302ce..81812c3e33 100644
--- a/apps/web/components/ui/alert.tsx
+++ b/apps/web/components/ui/alert.tsx
@@ -41,7 +41,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-cal leading-none", className)}
+    className={cn("mb-1 font-title leading-none", className)}
     {...props}
   />
 ));
diff --git a/apps/web/env.ts b/apps/web/env.ts
index 3d8615d9c9..b3729ab1ab 100644
--- a/apps/web/env.ts
+++ b/apps/web/env.ts
@@ -182,6 +182,7 @@ export const env = createEnv({
       .boolean()
       .optional()
       .default(false),
+    NEXT_PUBLIC_USE_AEONIK_FONT: z.coerce.boolean().optional().default(false),
   },
   // For Next.js >= 13.4.4, you only need to destructure client variables:
   experimental__runtimeEnv: {
@@ -238,5 +239,6 @@ export const env = createEnv({
     NEXT_PUBLIC_DUB_REFER_DOMAIN: process.env.NEXT_PUBLIC_DUB_REFER_DOMAIN,
     NEXT_PUBLIC_DISABLE_REFERRAL_SIGNATURE:
       process.env.NEXT_PUBLIC_DISABLE_REFERRAL_SIGNATURE,
+    NEXT_PUBLIC_USE_AEONIK_FONT: process.env.NEXT_PUBLIC_USE_AEONIK_FONT,
   },
 });
diff --git a/apps/web/styles/CalSans-SemiBold.woff2 b/apps/web/styles/CalSans-SemiBold.woff2
deleted file mode 100644
index 36d71b70d0..0000000000
Binary files a/apps/web/styles/CalSans-SemiBold.woff2 and /dev/null differ
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index a7098b986c..1591d3efac 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -45,10 +45,9 @@ module.exports = {
         "marquee-reverse": "marquee-reverse var(--duration) linear infinite",
       },
       fontFamily: {
-        cal: ["var(--font-cal)", ...fontFamily.sans],
-        sans: ["var(--font-inter)", ...fontFamily.sans],
-        aeonik: ["var(--font-aeonik)", ...fontFamily.sans],
-        geist: ["var(--font-geist)", ...fontFamily.sans],
+        sans: ["var(--font-geist)", ...fontFamily.sans],
+        inter: ["var(--font-inter)", ...fontFamily.sans],
+        title: ["var(--font-title)", ...fontFamily.sans],
       },
       colors: {
         // shadcn/ui
diff --git a/turbo.json b/turbo.json
index af8280ba67..cf22202cf2 100644
--- a/turbo.json
+++ b/turbo.json
@@ -126,7 +126,8 @@
         "NEXT_PUBLIC_BEDROCK_SONNET_MODEL",
         "NEXT_PUBLIC_OLLAMA_MODEL",
         "NEXT_PUBLIC_APP_HOME_PATH",
-        "NEXT_PUBLIC_DUB_REFER_DOMAIN"
+        "NEXT_PUBLIC_DUB_REFER_DOMAIN",
+        "NEXT_PUBLIC_USE_AEONIK_FONT"
       ],
       "outputs": [".next/**", "!.next/cache/**"]
     },