diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
index 8c09fb5bb5..25ff92a191 100644
--- 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
index 66dd20ea4b..3296ffb101 100644
--- 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
index 126be37323..5fd5aec102 100644
--- 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/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
index 373a9de136..42bad0b630 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
+++ b/apps/web/app/(use-page-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
index 7a3f8d896c..690ead0165 100644
--- 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
index b15b850488..43a9efe812 100644
--- 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>
   );
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 70491f4800..f3d1730209 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -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
index 2466cfbb1f..2718e53c8f 100644
--- 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
index 9a689a1dac..a024215090 100644
--- 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";
@@ -87,12 +76,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
index 61d9428a6b..6d0891efcc 100644
--- 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
index e79dbc2ea6..38d1bdccaf 100644
--- 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
index cb78efa728..19a816164a 100644
--- 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
index 837db6f9a3..5953ed557d 100644
--- 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
index 7111803332..8afd26bb5a 100644
--- 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
index b20c0573d8..c0e2c02a83 100644
--- 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
index 59928e33be..d61a341342 100644
--- 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
index 0fbad2a581..5b48c1b49f 100644
--- 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
index bfbf086ae4..39c03c26f0 100644
--- 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
index e7168fb46e..a95dc24f0c 100644
--- 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
index 5250018464..17109e940e 100644
--- 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
index 3846d94447..feebaad064 100644
--- 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
index 66056bf1f4..5d096d9a07 100644
--- 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
index 36ab3dca21..c025cb4386 100644
--- 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
index 4c1c565de0..77a5af5db0 100644
--- 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
index 59df75a065..bad61e5e76 100644
--- 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
index c7d50efd98..6a8b95325f 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -1061,7 +1061,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
index 8b8d26890c..a36b0fe757 100644
--- 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
index 65ccdf9c95..764ae0566e 100644
--- 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>
diff --git a/apps/web/modules/ee/organizations/attributes/attributes-create-view.tsx b/apps/web/modules/ee/organizations/attributes/attributes-create-view.tsx
index ee9be9a014..578223afcb 100644
--- a/apps/web/modules/ee/organizations/attributes/attributes-create-view.tsx
+++ b/apps/web/modules/ee/organizations/attributes/attributes-create-view.tsx
@@ -70,7 +70,7 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
             href="/settings/organizations/attributes">
             <span className="sr-only">{t("back_to_attributes")}</span>
           </Button>
-          <div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
+          <div className="font-heading text-cal flex space-x-1 text-xl leading-none">
             <h1 className="text-emphasis">{t("attribute")}</h1>
             {watchedTitle && (
               <>
diff --git a/apps/web/modules/ee/organizations/attributes/attributes-edit-view.tsx b/apps/web/modules/ee/organizations/attributes/attributes-edit-view.tsx
index 934af85733..2aa9aad352 100644
--- a/apps/web/modules/ee/organizations/attributes/attributes-edit-view.tsx
+++ b/apps/web/modules/ee/organizations/attributes/attributes-edit-view.tsx
@@ -92,7 +92,7 @@ function EditAttributeHeader(props: { isPending: boolean }) {
             href="/settings/organizations/attributes">
             <span className="sr-only">{t("back_to_attributes")}</span>
           </Button>
-          <div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
+          <div className="font-heading text-cal flex space-x-1 text-xl leading-none">
             <h1 className="text-emphasis">{t("attribute")}</h1>
             {watchedTitle && (
               <>
diff --git a/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx b/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
index e026472d1c..33bae21949 100644
--- a/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
+++ b/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
@@ -181,7 +181,7 @@ function OrganizationAttributesPage({
             <div className="bg-emphasis text-emphasis flex h-16 w-16 items-center justify-center rounded-full p-2">
               <Icon name="tags" />
             </div>
-            <h2 className="font-cal text-emphasis mt-6 text-xl font-semibold leading-none">
+            <h2 className="font-heading text-emphasis mt-6 text-xl leading-none">
               {t("add_attributes")}
             </h2>
 
diff --git a/apps/web/modules/ee/organizations/components/CreateANewOrganizationForm.tsx b/apps/web/modules/ee/organizations/components/CreateANewOrganizationForm.tsx
index 1c8f2caae5..c0c3204fdb 100644
--- a/apps/web/modules/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/apps/web/modules/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -326,7 +326,7 @@ const CreateANewOrganizationFormChild = ({ session }: { session: Ensure<SessionC
         {isBillingEnabled && !isAdmin && (
           <>
             <div className="bg-subtle stack-y-5  rounded-lg p-5">
-              <h3 className="font-cal text-default text-lg font-semibold leading-4">
+              <h3 className="font-heading text-default text-lg leading-4">
                 Upgrade to Organizations
               </h3>
               <RadioArea.Group className={classNames("mt-1 flex flex-col gap-4")} value="ORGANIZATION">
diff --git a/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx b/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx
index dd262d500d..0341960b34 100644
--- a/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx
+++ b/apps/web/modules/ee/organizations/components/WelcomeToOrganizationsModal.tsx
@@ -136,7 +136,7 @@ export function WelcomeToOrganizationsModal() {
             </div>
 
             <div className="mb-2 flex flex-col gap-2 text-center">
-              <h2 className="font-cal text-emphasis text-2xl leading-none">
+              <h2 className="font-heading text-emphasis text-2xl leading-none">
                 {t("welcome_to_organizations")}
               </h2>
               <p className="text-default text-sm leading-normal">{t("organizations_welcome_description")}</p>
diff --git a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
index 1a5561b921..a6ec5ece92 100644
--- a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
+++ b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
@@ -39,7 +39,7 @@ const PaymentStatusView = () => {
           <Icon name="x" className="h-6 w-6 text-red-600" />
         </div>
         <div className="text-center">
-          <h1 className="font-cal text-emphasis text-2xl">{t("payment_failed")}</h1>
+          <h1 className="font-heading text-emphasis text-2xl">{t("payment_failed")}</h1>
           <p className="text-default mt-2 text-sm">{paymentError || t("payment_failed_description")}</p>
         </div>
         <Button color="secondary" href="/settings/organizations/new/onboard-members">
@@ -55,7 +55,7 @@ const PaymentStatusView = () => {
         <Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
       </div>
       <div className="text-center">
-        <h1 className="font-cal text-emphasis text-2xl">{t("payment_successful")}</h1>
+        <h1 className="font-heading text-emphasis text-2xl">{t("payment_successful")}</h1>
         <p className="text-default mt-2 text-sm">{t("creating_your_organization", { orgName: name })}</p>
         <p className="text-subtle mt-1 text-sm">{t("this_may_take_a_few_seconds")}</p>
       </div>
diff --git a/apps/web/modules/ee/sso/components/OIDCConnection.tsx b/apps/web/modules/ee/sso/components/OIDCConnection.tsx
index fd38ca0ae4..39ae8c6cd7 100644
--- a/apps/web/modules/ee/sso/components/OIDCConnection.tsx
+++ b/apps/web/modules/ee/sso/components/OIDCConnection.tsx
@@ -95,7 +95,7 @@ const CreateConnectionDialog = ({
               wellKnownUrl,
             });
           }}>
-          <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
+          <h2 className="font-heading text-emphasis text-xl tracking-wide">
             {t("sso_oidc_configuration_title")}
           </h2>
           <p className="text-subtle mb-4 mt-1 text-sm">{t("sso_oidc_configuration_description")}</p>
diff --git a/apps/web/modules/ee/sso/components/SAMLConnection.tsx b/apps/web/modules/ee/sso/components/SAMLConnection.tsx
index 6c42da590b..7ed5c850c8 100644
--- a/apps/web/modules/ee/sso/components/SAMLConnection.tsx
+++ b/apps/web/modules/ee/sso/components/SAMLConnection.tsx
@@ -90,7 +90,7 @@ const CreateConnectionDialog = ({
             });
           }}>
           <div className="mb-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("sso_saml_configuration_title")}
             </h2>
             <p className="text-subtle mb-5 mt-1 text-sm">{t("sso_saml_configuration_description")}</p>
diff --git a/apps/web/modules/ee/teams/components/MemberChangeRoleModal.tsx b/apps/web/modules/ee/teams/components/MemberChangeRoleModal.tsx
index 5c99c12112..f021e7a0eb 100644
--- a/apps/web/modules/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/apps/web/modules/ee/teams/components/MemberChangeRoleModal.tsx
@@ -157,7 +157,7 @@ export default function MemberChangeRoleModal(props: {
         <>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="text-center sm:text-left">
-              <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">
                 {t("change_member_role")}
               </h3>
             </div>
diff --git a/apps/web/modules/ee/workflows/components/EmptyScreen.tsx b/apps/web/modules/ee/workflows/components/EmptyScreen.tsx
index 2fcfa3052b..c7cb437ff2 100644
--- a/apps/web/modules/ee/workflows/components/EmptyScreen.tsx
+++ b/apps/web/modules/ee/workflows/components/EmptyScreen.tsx
@@ -119,7 +119,7 @@ export default function EmptyScreen(props: { isFilteredView: boolean }) {
           <Icon name="zap" className="dark:text-default inline-block h-10 w-10 stroke-[1.3px]" />
         </div>
         <div className="max-w-[420px] text-center">
-          <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
+          <h2 className="font-heading mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
           <p className="text-default line-clamp-2 mt-3 text-sm font-normal leading-6 dark:text-gray-300">
             {t("no_workflows_description")}
           </p>
diff --git a/apps/web/modules/embed/components/Embed.tsx b/apps/web/modules/embed/components/Embed.tsx
index 62b312d41f..919efbd671 100644
--- a/apps/web/modules/embed/components/Embed.tsx
+++ b/apps/web/modules/embed/components/Embed.tsx
@@ -199,7 +199,7 @@ const ChooseEmbedTypesDialogContent = ({
   return (
     <DialogContent className="rounded-lg p-10" type="creation" size="lg">
       <div className="mb-2">
-        <h3 className="font-cal text-emphasis mb-2 text-2xl font-semibold leading-none" id="modal-title">
+        <h3 className="font-heading text-emphasis mb-2 text-2xl leading-none" id="modal-title">
           {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
index fe5cfd5d16..9cac06b356 100644
--- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
@@ -163,7 +163,7 @@ const OnboardingPage = (props: PageProps) => {
           <div className="sm:mx-auto sm:w-full sm:max-w-[600px]">
             <div className="mx-auto px-4 sm:max-w-[520px]">
               <header>
-                <p className="font-cal mb-3 text-[28px] font-medium leading-7">
+                <p className="font-heading mb-3 text-[28px] leading-7">
                   {headers[currentStepIndex]?.title || "Undefined title"}
                 </p>
 
diff --git a/apps/web/modules/onboarding/components/OnboardingCard.tsx b/apps/web/modules/onboarding/components/OnboardingCard.tsx
index c97a537748..c2f85e4c58 100644
--- a/apps/web/modules/onboarding/components/OnboardingCard.tsx
+++ b/apps/web/modules/onboarding/components/OnboardingCard.tsx
@@ -58,14 +58,14 @@ export const OnboardingCard = ({
           {/* Card Header */}
           <div className="mb-2 flex w-full gap-1.5 py-2  md:mb-0 md:py-4">
             <div className="flex w-full flex-col gap-2">
-              <h1 className="font-cal text-xl font-semibold leading-6">{title}</h1>
+              <h1 className="font-heading text-xl leading-6">{title}</h1>
               <p className="text-subtle text-sm leading-tight">{subtitle}</p>
             </div>
           </div>
 
           {/* Content */}
           <div
-            className={`flex h-full min-h-0 w-full flex-1 flex-col gap-4 [container-type:size] ${
+            className={`flex h-full min-h-0 w-full flex-1 flex-col gap-4 @container-[size] ${
               floatingFooter ? "pb-10" : ""
             }`}>
             {isLoading ? (
diff --git a/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
index 79e4dc5d84..8f4655a44b 100644
--- a/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
@@ -165,7 +165,7 @@ export const OnboardingInviteBrowserView = ({
                     className="border-default mb-4 h-12 w-12 border-2"
                   />
                 )}
-                <h2 className="text-emphasis font-cal w-full text-left text-xl font-semibold leading-tight">
+                <h2 className="text-emphasis font-heading w-full text-left text-xl leading-tight">
                   {displayName}
                 </h2>
                 <p className="text-subtle text-left text-sm font-normal leading-tight">
diff --git a/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx b/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx
index e05909ecda..8c07690568 100644
--- a/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx
+++ b/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx
@@ -180,7 +180,7 @@ export const OrganizationCSVUploadModal = ({ isOpen, onClose }: OrganizationCSVU
           </div>
 
           <div className="mb-2 flex flex-col gap-2 text-center">
-            <h2 className="font-cal text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
+            <h2 className="font-heading text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
             <p className="text-default text-sm leading-normal">{t("upload_csv_description")}</p>
           </div>
 
diff --git a/apps/web/modules/onboarding/personal/_components/OnboardingCard.tsx b/apps/web/modules/onboarding/personal/_components/OnboardingCard.tsx
index f72443d2f5..4f507a119b 100644
--- a/apps/web/modules/onboarding/personal/_components/OnboardingCard.tsx
+++ b/apps/web/modules/onboarding/personal/_components/OnboardingCard.tsx
@@ -17,7 +17,7 @@ export const OnboardingCard = ({ title, subtitle, children, footer, isLoading }:
         {/* Card Header */}
         <div className="flex w-full gap-1.5 px-5 py-4">
           <div className="flex w-full flex-col gap-1">
-            <h1 className="font-cal text-xl font-semibold leading-6">{title}</h1>
+            <h1 className="font-heading text-xl leading-6">{title}</h1>
             <p className="text-subtle text-sm font-medium leading-tight">{subtitle}</p>
           </div>
         </div>
diff --git a/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx b/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
index 40bbd6cbd1..82e3d7d75a 100644
--- a/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
+++ b/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
@@ -179,7 +179,7 @@ export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
           </div>
 
           <div className="mb-2 flex flex-col gap-2 text-center">
-            <h2 className="font-cal text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
+            <h2 className="font-heading text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
             <p className="text-default text-sm leading-normal">{t("upload_csv_description")}</p>
           </div>
 
diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx
index 64531c187a..0ec5e488df 100644
--- a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx
+++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-view.tsx
@@ -74,7 +74,7 @@ export default function EditOAuthClient() {
           <div className="m-2 md:mx-14 md:mx-5">
             <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">
                   {t("oAuth_client_updation_form")}
                 </h1>
                 <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
diff --git a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx
index 4c38aa4e05..5a4e33b948 100644
--- a/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx
+++ b/apps/web/modules/settings/platform/oauth-clients/[clientId]/edit/edit-webhooks-view.tsx
@@ -48,7 +48,7 @@ export default function EditOAuthClientWebhooks() {
           <div className="m-2 md:mx-5">
             <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">
                   {t("webhook_update_form")}
                 </h1>
                 <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
diff --git a/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx b/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx
index 9e8e672ff0..504baf94cc 100644
--- a/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx
+++ b/apps/web/modules/settings/platform/oauth-clients/create-new-view.tsx
@@ -67,7 +67,7 @@ export default function CreateOAuthClient() {
           <div className="m-2 md:mx-5">
             <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">
                   {t("oAuth_client_creation_form")}
                 </h1>
                 <p className="text-default text-sm ltr:mr-4 rtl:ml-4">
diff --git a/apps/web/modules/settings/security/password-view.tsx b/apps/web/modules/settings/security/password-view.tsx
index cff4b55c7c..251f3314a5 100644
--- a/apps/web/modules/settings/security/password-view.tsx
+++ b/apps/web/modules/settings/security/password-view.tsx
@@ -167,7 +167,7 @@ const PasswordView = ({ user }: PasswordViewProps) => {
       {user && user.identityProvider !== IdentityProvider.CAL && !user.passwordAdded ? (
         <div className="border-subtle rounded-b-xl border border-t-0">
           <div className="px-4 py-6 sm:px-6">
-            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
+            <h2 className="font-heading text-emphasis text-lg leading-6">
               {t("account_managed_by_identity_provider", {
                 provider: IdentityProvider[user.identityProvider],
               })}
diff --git a/apps/web/modules/shell/Shell.tsx b/apps/web/modules/shell/Shell.tsx
index 25221d8d12..477d83a253 100644
--- a/apps/web/modules/shell/Shell.tsx
+++ b/apps/web/modules/shell/Shell.tsx
@@ -156,7 +156,7 @@ export function ShellMain(props: LayoutProps) {
                 {props.heading && (
                   <h3
                     className={classNames(
-                      "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 hidden 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 hidden truncate text-lg tracking-wide sm:text-xl md:block xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
                     )}>
                     {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
diff --git a/apps/web/modules/shell/UpgradeTip.tsx b/apps/web/modules/shell/UpgradeTip.tsx
index 8545182bdc..07afb93320 100644
--- a/apps/web/modules/shell/UpgradeTip.tsx
+++ b/apps/web/modules/shell/UpgradeTip.tsx
@@ -55,7 +55,7 @@ export function UpgradeTip({
           />
         </picture>
          <div className="relative my-4 w-full px-4 pb-4 sm:px-8 md:px-14">
-          <h1 className={classNames("font-cal mt-4 text-2xl sm:text-3xl")}>{title}</h1>
+          <h1 className={classNames("font-heading mt-4 text-2xl sm:text-3xl")}>{title}</h1>
           <p className={classNames("mb-8 mt-4 max-w-sm text-sm sm:text-base")}>{description}</p>
           {buttons}
         </div>
@@ -65,7 +65,7 @@ export function UpgradeTip({
         {features.map((feature) => (
           <div key={feature.title} className="bg-cal-muted mb-4 min-h-[180px] w-full rounded-md  p-8 md:mb-0">
             {feature.icon}
-            <h2 className="font-cal text-emphasis mt-4 text-lg">{feature.title}</h2>
+            <h2 className="font-heading text-emphasis mt-4 text-lg">{feature.title}</h2>
             <p className="text-default">{feature.description}</p>
           </div>
         ))}
diff --git a/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx b/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx
index fe454857c9..59c59482de 100644
--- a/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx
+++ b/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx
@@ -83,7 +83,7 @@ export function WelcomeToCalcomModal() {
           </div>
 
           <div className="mb-2 flex flex-col gap-2 text-center">
-            <h2 className="font-cal text-emphasis text-2xl leading-none">
+            <h2 className="font-heading text-emphasis text-2xl leading-none">
               {t("welcome_to_calcom", { appName: APP_NAME })}
             </h2>
             <p className="text-default text-sm leading-normal">{t("personal_welcome_description")}</p>
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index 4ca7c48932..c9e3d10e96 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -385,7 +385,7 @@ export default function Signup({
               </div>
             )}
             <div className="flex flex-col gap-2">
-              <h1 className="font-cal text-[28px] leading-none ">
+              <h1 className="font-heading text-[28px] leading-none ">
                 {IS_CALCOM ? t("create_your_calcom_account") : t("create_your_account")}
               </h1>
               {IS_CALCOM ? (
diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx
index aad900a32b..88b6aba5c7 100644
--- a/apps/web/modules/team/team-view.tsx
+++ b/apps/web/modules/team/team-view.tsx
@@ -132,7 +132,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
       <div className="stack-y-6" data-testid="event-types">
         <div className="overflow-hidden rounded-sm border dark:border-gray-900">
           <div className="text-muted p-8 text-center">
-            <h2 className="font-cal text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
+            <h2 className="font-heading text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
             <p className="text-emphasis mx-auto max-w-md">{t("org_no_teams_yet_description")}</p>
           </div>
         </div>
@@ -148,7 +148,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
           <div className="relative">
             <Avatar alt={teamName} imageSrc={profileImageSrc} size="lg" />
           </div>
-          <p className="font-cal  text-emphasis mb-2 text-2xl tracking-wider" data-testid="team-name">
+          <p className="font-heading text-emphasis mb-2 text-2xl tracking-wider" data-testid="team-name">
             {team.parent && `${team.parent.name} `}
             {teamName}
           </p>
diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index 7fae8d32fb..0d911e42c2 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -80,7 +80,7 @@ export function UserPage(props: PageProps) {
                 }}
                 className={isOrg && user.profile.organization?.bannerUrl ? "-mt-14" : ""}
               />
-              <h1 className={classNames("font-cal text-emphasis mb-1 text-xl", isOrg && user.profile.organization?.bannerUrl ? "" : "mt-4")} data-testid="name-title">
+              <h1 className={classNames("font-heading text-emphasis mb-1 text-xl", isOrg && user.profile.organization?.bannerUrl ? "" : "mt-4")} data-testid="name-title">
                 {profile.name}
                 {!isOrg && user.verified && (
                   <Icon
diff --git a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
index 4fef528f17..c74b082f29 100644
--- a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
@@ -37,7 +37,7 @@ export default function MeetingUnavailable(props: PageProps) {
                     </h3>
                   </div>
                   <div className="mt-4 border-b border-t py-4">
-                    <h2 className="font-cal text-default mb-2 text-center text-lg font-medium">
+                    <h2 className="font-heading text-default mb-2 text-center text-lg">
                       {props.booking.title}
                     </h2>
                     <p className="text-subtle text-center">
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index 09d0dcbd91..3b77f46f50 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -569,7 +569,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
           "no-scrollbar fixed left-0 top-0 z-30 flex h-full w-64 transform justify-between overflow-x-hidden overflow-y-scroll transition-all duration-300 ease-in-out",
           open ? "translate-x-0" : "-translate-x-[232px]"
         )}>
-        <main className="prose-sm prose max-w-64 prose-a:text-white prose-h3:text-white prose-h3:font-cal scroll-bar scrollbar-track-w-20 overflow-x-hidden! bg-default w-full overflow-scroll border-r border-gray-300/20 p-4 text-white shadow-sm backdrop-blur-lg">
+        <main className="prose-sm prose max-w-64 prose-a:text-white prose-h3:text-white prose-h3:font-heading scroll-bar scrollbar-track-w-20 overflow-x-hidden! bg-default w-full overflow-scroll border-r border-gray-300/20 p-4 text-white shadow-sm backdrop-blur-lg">
           <h3>{t("what")}:</h3>
           <p>{booking.title}</p>
           <h3>{t("invitee_timezone")}:</h3>
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index e3cffc6f7f..536cc83df7 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -4,6 +4,7 @@ import { dir } from "i18next";
 import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
 
+import { fontHeading, fontSans } from "@coss/ui/fonts";
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 
 import { applyTheme, applyToDesktopClass } from "./../lib/pages/document/_applyThemeForDocument";
@@ -82,7 +83,7 @@ class MyDocument extends Document<Props> {
         </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/packages/app-store/_components/AppNotInstalledMessage.tsx b/packages/app-store/_components/AppNotInstalledMessage.tsx
index b2d293c7f2..c5d4797f73 100644
--- a/packages/app-store/_components/AppNotInstalledMessage.tsx
+++ b/packages/app-store/_components/AppNotInstalledMessage.tsx
@@ -11,7 +11,7 @@ export default function AppNotInstalledMessage({ appName }: { appName: string })
         <div className="mb-5 rounded-full bg-gray-100 p-3  dark:bg-[#292929] ">
           <Icon name="circle-alert" className="h-9 w-9 p-0.5" strokeWidth={1.5} />
         </div>
-        <h3 className="font-cal mb-2 text-2xl font-semibold">{t("app_not_installed")}</h3>
+        <h3 className="font-heading mb-2 text-2xl">{t("app_not_installed")}</h3>
         <p className="text-subtle px-1 leading-normal">{t("visit_our_app_store")}</p>
 
         <div className="mt-5">
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index bb4ec2b57a..074429d1ba 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -118,7 +118,7 @@ export const SearchDialog = (props: ISearchDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
-        <h3 className="font-cal text-emphasis text-xl" id="modal-title">
+        <h3 className="font-heading text-emphasis text-xl" id="modal-title">
           {t("add_gif_to_confirmation")}
         </h3>
         <p className="text-subtle mb-3 text-sm font-light">{t("find_gif_spice_confirmation")}</p>
diff --git a/packages/config/theme/tokens.css b/packages/config/theme/tokens.css
index f09ee8b2f8..2f013e4e37 100644
--- a/packages/config/theme/tokens.css
+++ b/packages/config/theme/tokens.css
@@ -15,7 +15,7 @@
 
 @theme inline {
   --font-sans: var(--font-sans);
-  --font-cal: var(--font-cal);
+  --font-heading: var(--font-heading);
 
   /* Resets the preference from coss-ui which was to "use single --radius variable for all radius values" */
   --radius: var(--radius);
diff --git a/packages/coss-ui/package.json b/packages/coss-ui/package.json
index 235af2d599..639a43beb3 100644
--- a/packages/coss-ui/package.json
+++ b/packages/coss-ui/package.json
@@ -6,7 +6,8 @@
     "./styles.css": "./src/styles/globals.css",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/*.tsx",
-    "./hooks/*": "./src/hooks/*.ts"
+    "./hooks/*": "./src/hooks/*.ts",
+    "./fonts": "./src/fonts/index.ts"
   },
   "scripts": {
     "lint": "biome lint src",
diff --git a/apps/web/fonts/CalSans-SemiBold.woff2 b/packages/coss-ui/src/fonts/CalSans-SemiBold.woff2
similarity index 100%
rename from apps/web/fonts/CalSans-SemiBold.woff2
rename to packages/coss-ui/src/fonts/CalSans-SemiBold.woff2
diff --git a/packages/coss-ui/src/fonts/CalSansUI[MODE,wght].woff2 b/packages/coss-ui/src/fonts/CalSansUI[MODE,wght].woff2
new file mode 100644
index 0000000000..d353c58932
Binary files /dev/null and b/packages/coss-ui/src/fonts/CalSansUI[MODE,wght].woff2 differ
diff --git a/packages/coss-ui/src/fonts/README.md b/packages/coss-ui/src/fonts/README.md
new file mode 100644
index 0000000000..a9ee08dd24
--- /dev/null
+++ b/packages/coss-ui/src/fonts/README.md
@@ -0,0 +1,49 @@
+# Shared Fonts
+
+This directory contains shared font files and configurations used across all apps in the monorepo.
+
+## Usage
+
+Import fonts directly from the shared UI package:
+
+```tsx
+import { fontSans, fontHeading } from "@coss/ui/fonts";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${fontSans.variable} ${fontHeading.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+
+## Available Fonts
+
+- `fontSans` - Cal Sans UI variable font (supports multiple weights and modes)
+- `fontHeading` - Cal Sans Regular font
+
+## Adding New Fonts
+
+1. Place the font file in this directory (`packages/coss-ui/src/fonts/`)
+2. Add a new font configuration in `index.ts`:
+
+```typescript
+export const yourNewFont = localFont({
+  display: "swap",
+  src: "./YourFont.woff2",
+  variable: "--font-your-name",
+});
+```
+
+3. Use it in any app by importing from `@coss/ui/fonts`
+
+## Benefits of This Approach
+
+- Single source of truth for fonts
+- No fragile relative paths
+- Type-safe imports
+- Versioned with the UI package
+- Easy to update across all apps
diff --git a/packages/coss-ui/src/fonts/index.ts b/packages/coss-ui/src/fonts/index.ts
new file mode 100644
index 0000000000..0ceaec8905
--- /dev/null
+++ b/packages/coss-ui/src/fonts/index.ts
@@ -0,0 +1,13 @@
+import localFont from "next/font/local";
+
+export const fontSans = localFont({
+  display: "swap",
+  src: "./CalSansUI[MODE,wght].woff2",
+  variable: "--font-sans",
+});
+
+export const fontHeading = localFont({
+  display: "swap",
+  src: "./CalSans-SemiBold.woff2",
+  variable: "--font-heading",
+});
diff --git a/packages/features/settings/appDir/SettingsHeader.tsx b/packages/features/settings/appDir/SettingsHeader.tsx
index 9d6944cfa7..6ee10a5086 100644
--- a/packages/features/settings/appDir/SettingsHeader.tsx
+++ b/packages/features/settings/appDir/SettingsHeader.tsx
@@ -63,7 +63,7 @@ export default function Header({
             )}
             <div>
               {title ? (
-                <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">
                   {title}
                 </h1>
               ) : (
diff --git a/packages/platform/atoms/globals.css b/packages/platform/atoms/globals.css
index 980d0396e2..70eb1d50a1 100644
--- a/packages/platform/atoms/globals.css
+++ b/packages/platform/atoms/globals.css
@@ -242,7 +242,6 @@
       "Courier New", monospace;
     --radius: var(--radius);
     --font-heading: var(--font-heading);
-    --font-cal: var(--font-cal);
     --shadow-dropdown: var(--shadow-dropdown);
     --shadow-switch-thumb: var(--shadow-switch-thumb);
     --shadow-solid-gray-rested: var(--shadow-solid-gray-rested);
@@ -4949,14 +4948,14 @@
   .align-top {
     vertical-align: top;
   }
-  .\!font-cal {
-    font-family: var(--font-cal) !important;
+  .\!font-heading {
+    font-family: var(--font-heading) !important;
   }
   .font-\(family-name\:--font-sans\) {
     font-family: var(--font-sans);
   }
-  .font-cal {
-    font-family: var(--font-cal);
+  .font-heading {
+    font-family: var(--font-heading);
   }
   .font-mono {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New,
@@ -9270,8 +9269,8 @@
   .prose-headings\:text-emphasis :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *)) {
     color: var(--cal-text-emphasis);
   }
-  .prose-h3\:font-cal :where(h3):not(:where([class~="not-prose"] *)) {
-    font-family: var(--font-cal);
+  .prose-h3\:font-heading :where(h3):not(:where([class~="not-prose"] *)) {
+    font-family: var(--font-heading);
   }
   .prose-h3\:text-white :where(h3):not(:where([class~="not-prose"] *)) {
     color: var(--color-white);
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index ceadfa9046..ca768bc7c6 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -85,7 +85,7 @@ const cvaCardTypeByVariant = cva("", {
     {
       variant: "SidebarCard",
       structure: "title",
-      className: "text-sm font-cal",
+      className: "text-sm font-heading",
     },
     {
       variant: "SidebarCard",
@@ -107,7 +107,7 @@ const cvaCardTypeByVariant = cva("", {
     {
       variant: "NewLaunchSidebarCard",
       structure: "title",
-      className: "text-sm font-cal text-white",
+      className: "text-sm font-heading text-white",
     },
     {
       variant: "NewLaunchSidebarCard",
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 218174938f..8b78c163b5 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -65,7 +65,7 @@ export const ConfirmationContent = (props: PropsWithChildren<ConfirmationDialogC
           </div>
         )}
         <div className="w-full">
-          <DialogPrimitive.Title className="font-cal text-emphasis mt-2 text-xl">
+          <DialogPrimitive.Title className="font-heading text-emphasis mt-2 text-xl">
             {title}
           </DialogPrimitive.Title>
           <DialogPrimitive.Description asChild>
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 27f52c03a7..16fefe8077 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -129,7 +129,7 @@ export function DialogHeader(props: DialogHeaderProps) {
     <div className="mb-4">
       <h2
         data-testid="dialog-title"
-        className="text-semibold text-emphasis font-cal mb-1 text-xl"
+        className="text-emphasis font-heading mb-1 text-xl"
         id="modal-title">
         {props.title}
       </h2>
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index 5ef55d3596..a7ecf2ae0b 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -67,7 +67,7 @@ export function EmptyScreen({
         <div className={`flex ${limitWidth ? "max-w-[420px]" : ""}  flex-col items-center`}>
           <h2
             className={classNames(
-              "text-semibold font-cal text-emphasis text-center text-xl normal-nums",
+              "font-heading text-emphasis text-center text-xl normal-nums",
               icon && "mt-6",
               !description && "mb-8"
             )}>
diff --git a/packages/ui/components/form/wizard/WizardForm.tsx b/packages/ui/components/form/wizard/WizardForm.tsx
index 2ca737ad90..84396e71c2 100644
--- a/packages/ui/components/form/wizard/WizardForm.tsx
+++ b/packages/ui/components/form/wizard/WizardForm.tsx
@@ -61,7 +61,7 @@ export function WizardForm({
     <div className="mx-auto mt-4 print:w-full" data-testid="wizard-form">
       <div className={classNames("overflow-hidden md:mb-2 md:w-[700px]", containerClassname)}>
         <div className="px-6 py-5">
-          <h1 className="font-cal text-emphasis text-2xl" data-testid="step-title">
+          <h1 className="font-heading text-emphasis text-2xl" data-testid="step-title">
             {currentStepData.title}
           </h1>
           <p className="text-subtle text-sm" data-testid="step-description">
diff --git a/packages/ui/components/layout/WizardLayout.tsx b/packages/ui/components/layout/WizardLayout.tsx
index 5506495c73..6fa6b1ff27 100644
--- a/packages/ui/components/layout/WizardLayout.tsx
+++ b/packages/ui/components/layout/WizardLayout.tsx
@@ -46,7 +46,7 @@ export function WizardLayout({
               <header>
                 {isLocaleReady ? (
                   <>
-                    <p className="font-cal mb-3 text-[28px] font-medium leading-7">
+                    <p className="font-heading mb-3 text-[28px] leading-7">
                       {title.replace(` | ${APP_NAME}`, "")}&nbsp;
                     </p>
                     <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>