calcom · eunjae-lee · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026 · Jan 16, 2026
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
@@ -27,7 +27,7 @@ export function ShellMainAppDir(props: LayoutProps) {
                 {props.heading && (
                   <h3
                     className={classNames(
-                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 inline truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
+                      "font-heading text-emphasis max-w-28 sm:max-w-72 md:max-w-80 inline truncate text-lg tracking-wide sm:text-xl md:block xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {props.heading}

diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx
@@ -183,7 +183,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
 
                   <form onSubmit={handleOnSubmit}>
                     <div className="mb-8">
-                      <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold tracking-wide">
+                      <h1 className="font-heading text-emphasis mb-1 text-xl tracking-wide">
                         {form.name}
                       </h1>
                       {form.description ? (

diff --git a/apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx b/apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx
@@ -19,7 +19,7 @@ export function AvailabilityScheduleSkeleton() {
             {/* Title section */}
             <header className="flex w-full max-w-full items-center truncate">
               <div className="w-full truncate ltr:mr-4 rtl:ml-4 md:block">
-                <SkeletonText className="font-cal max-w-28 sm:max-w-72 md:max-w-80 hidden h-6 truncate text-xl font-semibold tracking-wide md:block" />
+                <SkeletonText className="font-heading max-w-28 sm:max-w-72 md:max-w-80 hidden h-6 truncate text-xl tracking-wide md:block" />
                 {/* Title */}
                 <SkeletonText className="mt-1 hidden h-4 w-64 text-sm md:block" /> {/* Subtitle */}
               </div>

diff --git a/...ge-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx b/...ge-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
@@ -51,7 +51,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
             <FingerprintAnimation isHovered={isButtonHovered} />
 
             <div className="flex w-full flex-col items-center gap-1 text-center">
-              <h2 className="font-cal text-emphasis text-xl font-semibold">{t("pbac_opt_in_title")}</h2>
+              <h2 className="font-heading text-emphasis text-xl">{t("pbac_opt_in_title")}</h2>
               <p className="text-default text-sm">{t("pbac_opt_in_description")}</p>
             </div>
           </div>

diff --git a/apps/web/app/icons/IconGrid.tsx b/apps/web/app/icons/IconGrid.tsx
@@ -10,7 +10,7 @@ export const IconGrid = (props: {
   iconClassName?: string;
 }) => (
   <div className={props.rootClassName}>
-    <h2 className="font-cal mt-6 text-lg font-medium">{props.title}</h2>
+    <h2 className="font-heading mt-6 text-lg">{props.title}</h2>
     <div className="grid grid-cols-2 lg:grid-cols-6">
       {props.icons.map((icon) => {
         return (

diff --git a/apps/web/app/icons/page.tsx b/apps/web/app/icons/page.tsx
@@ -15,32 +15,21 @@ export async function generateMetadata(): Promise<Metadata> {
   return await _generateMetadataForStaticPage("Icons Showcase", "", undefined, undefined, "/icons");
 }
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
-const calFont = localFont({
-  src: "../../fonts/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "swap",
-  weight: "600",
-});
-
 export default function IconsPage() {
   const icons = Array.from(lucideIconList).sort() as IconName[];
 
   return (
-    <div className={`${interFont.variable} ${calFont.variable}`}>
-      <div className="bg-subtle flex h-screen">
-        <IconSprites />
-        <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
-          <h1 className="text-emphasis font-cal text-2xl font-medium">Icons Showcase</h1>
-          <IconGrid title="Regular Icons" icons={icons} />
-          <IconGrid
-            title="Filled Icons"
-            icons={icons}
-            rootClassName="bg-inverted text-inverted"
-            iconClassName="fill-blue-500"
-          />
-        </div>
+    <div className="bg-subtle flex h-screen">
+      <IconSprites />
+      <div className="bg-default m-auto min-w-full rounded-md p-10 text-right ltr:text-left">
+        <h1 className="text-emphasis font-heading text-2xl">Icons Showcase</h1>
+        <IconGrid title="Regular Icons" icons={icons} />
+        <IconGrid
+          title="Filled Icons"
+          icons={icons}
+          rootClassName="bg-inverted text-inverted"
+          iconClassName="fill-blue-500"
+        />
       </div>
     </div>
   );

@@ -1,6 +1,4 @@
 import { dir } from "i18next";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
 import { headers, cookies } from "next/headers";
 import React from "react";
 
@@ -15,14 +13,7 @@ import { AppRouterI18nProvider } from "./AppRouterI18nProvider";
 import { SpeculationRules } from "./SpeculationRules";
 import { Providers } from "./providers";
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
-const calFont = localFont({
-  src: "../fonts/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "block",
-  weight: "600",
-});
+import { fontHeading, fontSans } from "@coss/ui/fonts";
 
 export const viewport = {
   width: "device-width",
@@ -114,16 +105,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}
       suppressHydrationWarning
       data-nextjs-router="app">
-      <head nonce={nonce}>
-        <style>{`
-          :root {
-            --font-sans: ${interFont.style.fontFamily.replace(/\'/g, "")};
-            --font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
-          }
-        `}</style>
-      </head>
       <body
-        className="dark:bg-default bg-subtle antialiased"
+        className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased`}
         style={
           isEmbed
             ? {

diff --git a/apps/web/app/notFoundClient.tsx b/apps/web/app/notFoundClient.tsx
@@ -92,7 +92,7 @@ export function NotFound({ host }: { host: string }) {
         <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
           <div className="text-center">
             <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-            <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
+            <h1 className="font-heading mt-2 text-4xl text-gray-900 sm:text-5xl">
               {t("feature_currently_disabled") ?? "Feature is currently disabled"}
             </h1>
           </div>
@@ -114,7 +114,7 @@ export function NotFound({ host }: { host: string }) {
       <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
         <div className="text-center">
           <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{t("error_404")}</p>
-          <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
+          <h1 className="font-heading text-emphasis mt-2 text-4xl sm:text-5xl">
             {isBookingSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
           </h1>
           {isSubpage && pageType !== PageType.TEAM ? (

diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
@@ -10,8 +10,6 @@
 "use client";
 
 import { DefaultSeo } from "next-seo";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
 import Head from "next/head";
 import Script from "next/script";
 
@@ -33,15 +31,6 @@ export interface CalPageWrapper {
   PageWrapper?: AppProps["Component"]["PageWrapper"];
 }
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
-const calFont = localFont({
-  src: "../fonts/CalSans-SemiBold.woff2",
-  variable: "--font-cal",
-  preload: true,
-  display: "swap",
-  weight: "600",
-});
-
 function PageWrapper(props: AppProps) {
   const { Component, pageProps, err, router } = props;
   let pageStatus = "200";
@@ -88,12 +77,6 @@ function PageWrapper(props: AppProps) {
         dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
       />
 
-      <style jsx global>{`
-        :root {
-          --font-sans: ${interFont.style.fontFamily};
-          --font-cal: ${calFont.style.fontFamily};
-        }
-      `}</style>
       <IconSprites />
 
       {getLayout(

diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
@@ -343,7 +343,7 @@ export const AppPage = ({
                 src={logo}
                 alt={name}
               />
-              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
+              <h1 className="font-heading text-emphasis ml-4 text-3xl">{name}</h1>
             </div>
             <h2 className="text-default text-sm font-medium">
               <Link

diff --git a/apps/web/components/apps/installation/StepHeader.tsx b/apps/web/components/apps/installation/StepHeader.tsx
@@ -9,7 +9,7 @@ export const StepHeader: FC<StepHeaderProps> = ({ children, title, subtitle }) =
   return (
     <div>
       <header>
-        <p className="font-cal mb-3 text-[28px] font-medium capitalize leading-7">{title}</p>
+        <p className="font-heading mb-3 text-[28px] capitalize leading-7">{title}</p>
 
         <p className="text-subtle font-sans text-sm font-normal">{subtitle}</p>
       </header>

diff --git a/apps/web/components/apps/routing-forms/FormActions.tsx b/apps/web/components/apps/routing-forms/FormActions.tsx
@@ -95,7 +95,7 @@ function NewFormDialog({
     <Dialog open={newFormDialogState !== null} onOpenChange={(open) => !open && setNewFormDialogState(null)}>
       <DialogContent className="overflow-y-auto">
         <div className="mb-1">
-          <h3 className="text-emphasis !font-cal text-semibold text-xl font-medium" id="modal-title">
+          <h3 className="text-emphasis font-heading! text-xl" id="modal-title">
             {teamId ? t("add_new_team_form") : t("add_new_form")}
           </h3>
           <div>

diff --git a/apps/web/components/dialog/RerouteDialog.tsx b/apps/web/components/dialog/RerouteDialog.tsx
@@ -804,7 +804,7 @@ const RerouteDialogContentAndFooterWithFormResponse = ({
     <div>
       <div>
         <Link
-          className="text-emphasis text-semibold font-cal mb-4 flex underline"
+          className="text-emphasis font-heading mb-4 flex underline"
           href={`/apps/routing-forms/form-edit/${form.id}`}
           target="_blank">
           {form.name}

diff --git a/apps/web/components/error/error-page.tsx b/apps/web/components/error/error-page.tsx
@@ -71,7 +71,7 @@ export const ErrorPage: React.FC<Props> = (props) => {
     <>
       <div className="bg-subtle flex h-screen">
         <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
-          <h1 className="font-cal text-emphasis text-6xl">{statusCode}</h1>
+          <h1 className="font-heading text-emphasis text-6xl">{statusCode}</h1>
           <h2 className="text-emphasis mt-6 max-w-2xl text-2xl font-medium">
             It&apos;s not you, it&apos;s us.
           </h2>

diff --git a/apps/web/components/security/DisableUserImpersonation.tsx b/apps/web/components/security/DisableUserImpersonation.tsx
@@ -21,7 +21,7 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
       <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
-            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
+            <h2 className="font-heading text-emphasis text-lg leading-6">
               {t("user_impersonation_heading")}
             </h2>
             <Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>

diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -18,7 +18,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
       <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
-            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("2fa")}</h2>
+            <h2 className="font-heading text-emphasis text-lg leading-6">{t("2fa")}</h2>
             <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
               {enabled ? t("enabled") : t("disabled")}
             </Badge>

diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -7,7 +7,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
         <Icon name="shield" className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-        <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
+        <h3 className="font-heading text-emphasis text-lg leading-6" id="modal-title">
           {title}
         </h3>
         <p className="text-muted text-sm">{description}</p>

diff --git a/apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx b/apps/web/components/settings/platform/dashboard/oauth-clients-list/index.tsx
@@ -17,7 +17,7 @@ export const OAuthClientsList = ({ oauthClients, isDeleting, handleDelete }: OAu
     <div className="mb-10">
       <div className="border-subtle mx-auto block justify-between rounded-t-lg border px-4 py-6 sm:flex sm:px-6">
         <div className="flex w-full flex-col">
-          <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
+          <h1 className="font-heading text-emphasis mb-1 text-xl leading-5 tracking-wide">
             OAuth Clients
           </h1>
           <p className="text-default text-sm ltr:mr-4 rtl:ml-4">

diff --git a/apps/web/components/setup/ChooseLicense.tsx b/apps/web/components/setup/ChooseLicense.tsx
@@ -39,7 +39,7 @@ const ChooseLicense = (
               "bg-default cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
+            <h2 className="font-heading text-emphasis text-xl">{t("agplv3_license")}</h2>
             <p className="font-medium text-green-800">{t("free_license_fee")}</p>
             <p className="text-subtle">{t("forever_open_and_free")}</p>
             <ul className="text-subtle ml-4 list-disc text-left text-xs">
@@ -52,7 +52,7 @@ const ChooseLicense = (
         <RadioGroup.Item value="EE" disabled>
           <Link href="https://cal.com/sales" target="_blank">
             <div className={classNames("bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4")}>
-              <h2 className="font-cal text-emphasis text-xl">{t("custom_plan")}</h2>
+              <h2 className="font-heading text-emphasis text-xl">{t("custom_plan")}</h2>
               <p className="font-medium text-green-800">{t("contact_sales")}</p>
               <p className="text-subtle">Build on top of Cal.com</p>
               <ul className="text-subtle ml-4 list-disc text-left text-xs">

diff --git a/apps/web/components/setup/LicenseSelection.tsx b/apps/web/components/setup/LicenseSelection.tsx
@@ -122,7 +122,7 @@ const LicenseSelection = (
               "bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
+            <h2 className="font-heading text-emphasis text-xl">{t("agplv3_license")}</h2>
             <p className="font-medium text-green-800">{t("free_license_fee")}</p>
             <p className="text-subtle">{t("forever_open_and_free")}</p>
             <ul className="text-subtle ml-4 list-disc text-left text-xs">
@@ -139,7 +139,7 @@ const LicenseSelection = (
               "bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "EXISTING" && "ring-2 ring-black"
             )}>
-            <h2 className="font-cal text-emphasis text-xl">{t("enter_license_key")}</h2>
+            <h2 className="font-heading text-emphasis text-xl">{t("enter_license_key")}</h2>
             <p className="font-medium text-green-800">{t("enter_existing_license")}</p>
             <p className="text-subtle">{t("enter_your_license_key")}</p>
             <p className="text-subtle text-xs">

diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx
@@ -17,7 +17,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
       {props.showLogo && <Logo small inline={false} className="mx-auto mb-auto" />}
 
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
-        {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
+        {props.heading && <h2 className="font-heading text-emphasis text-center text-3xl">{props.heading}</h2>}
       </div>
       {props.loading && (
         <div className="bg-cal-muted absolute z-50 flex h-screen w-full items-center">

diff --git a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
@@ -23,7 +23,7 @@ function Success() {
     <>
       <div className="stack-y-6">
         <div>
-          <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">
+          <h2 className="font-heading text-emphasis mt-6 text-center text-3xl">
             {t("password_updated")}
           </h2>
         </div>
@@ -41,7 +41,7 @@ function Expired() {
     <>
       <div className="stack-y-6">
         <div>
-          <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">{t("whoops")}</h2>
+          <h2 className="font-heading text-emphasis mt-6 text-center text-3xl">{t("whoops")}</h2>
           <h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
         </div>
         <p>{t("request_is_expired_instructions")}</p>

diff --git a/apps/web/modules/auth/verify-view.tsx b/apps/web/modules/auth/verify-view.tsx
@@ -172,7 +172,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) {
           ) : (
             <MailOpenIcon />
           )}
-          <h3 className="font-cal text-emphasis my-6 text-2xl font-normal leading-none">
+          <h3 className="font-heading text-emphasis my-6 text-2xl leading-none">
             {hasPaymentFailed
               ? t("your_payment_failed")
               : isPremiumUsername

diff --git a/apps/web/modules/bookings/components/BookEventForm/BookFormAsModal.tsx b/apps/web/modules/bookings/components/BookEventForm/BookFormAsModal.tsx
@@ -53,7 +53,7 @@ export const BookEventFormWrapperComponent = ({
   }
   return (
     <>
-      <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
+      <h1 className="font-heading text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
       <div className="my-4 flex flex-wrap gap-2 rounded-md leading-none">
         <Badge variant="grayWithoutHover" startIcon="calendar" size="lg">
           <FromTime

diff --git a/apps/web/modules/bookings/components/Unavailable.tsx b/apps/web/modules/bookings/components/Unavailable.tsx
@@ -3,7 +3,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 const UnAvailableMessage = ({ children, title }: { children: React.ReactNode; title: string }) => (
   <div className="mx-auto w-full max-w-2xl">
     <div className="border-subtle bg-default dark:bg-cal-muted overflow-hidden rounded-lg border p-10">
-      <h2 className="font-cal mb-4 text-3xl">{title}</h2>
+      <h2 className="font-heading mb-4 text-3xl">{title}</h2>
       {children}
     </div>
   </div>

diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -1071,7 +1071,7 @@ export default function Success(props: PageProps) {
                         ))}
                       </div>
                       <div className="stack-y-1 my-4 text-center">
-                        <h2 className="font-cal text-lg">{t("submitted_feedback")}</h2>
+                        <h2 className="font-heading text-lg">{t("submitted_feedback")}</h2>
                         <p className="text-sm">{rateValue < 4 ? t("how_can_we_improve") : t("most_liked")}</p>
                       </div>
                       <TextArea

diff --git a/apps/web/modules/ee/api-keys/components/ApiKeyDialogForm.tsx b/apps/web/modules/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -97,7 +97,7 @@ export default function ApiKeyDialogForm({
       {successfulNewApiKeyModal ? (
         <>
           <div className="mb-6">
-            <h2 className="font-semi-bold font-cal text-emphasis mb-2 text-xl tracking-wide">
+            <h2 className="font-heading text-emphasis mb-2 text-xl tracking-wide">
               {t("success_api_key_created")}
             </h2>
             <div className="text-emphasis text-sm">
@@ -153,7 +153,7 @@ export default function ApiKeyDialogForm({
           }}
           className="stack-y-4">
           <div className="mb-4 mt-1">
-            <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
+            <h2 className="font-heading text-emphasis text-xl tracking-wide">
               {defaultValues ? t("edit_api_key") : t("create_api_key")}
             </h2>
             {IS_CALCOM ? (

diff --git a/apps/web/modules/ee/dsync/components/CreateDirectory.tsx b/apps/web/modules/ee/dsync/components/CreateDirectory.tsx
@@ -56,7 +56,7 @@ const CreateDirectory = ({ orgId }: { orgId: number | null }) => {
               });
             }}>
             <div className="mb-5 mt-1">
-              <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
+              <h2 className="font-heading text-emphasis text-xl tracking-wide">
                 {t("directory_sync_configure")}
               </h2>
               <p className="mt-1 text-sm text-gray-500">{t("directory_sync_configure_description")}</p>