Fonts

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>
 

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}

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>

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>
   );
 }

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}

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.

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">

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">

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}
     />
   );

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>
 

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">

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>

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>

apps/web/app/(landing)/welcome-upgrade/WelcomeUpgradeHeader.tsx

@@ -10,20 +10,20 @@ 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">
               Join {userCount} users that use Inbox Zero to be more productive!
             </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!

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"

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">

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";
 

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>
   );

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",

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>
           )}

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} />

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]",
     ],

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" : "",
           )}
         >