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 25ff92a191..8c09fb5bb5 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-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",
+                      "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",
                       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 3296ffb101..66dd20ea4b 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-heading text-emphasis mb-1 text-xl tracking-wide">
+                      <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold 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 5fd5aec102..126be37323 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-heading max-w-28 sm:max-w-72 md:max-w-80 hidden h-6 truncate text-xl tracking-wide 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" />
                 {/* 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 42bad0b630..373a9de136 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-heading text-emphasis text-xl">{t("pbac_opt_in_title")}</h2>
+              <h2 className="font-cal text-emphasis text-xl font-semibold">{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 690ead0165..7a3f8d896c 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-heading mt-6 text-lg">{props.title}</h2>
+    <h2 className="font-cal mt-6 text-lg font-medium">{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 43a9efe812..b15b850488 100644
--- a/apps/web/app/icons/page.tsx
+++ b/apps/web/app/icons/page.tsx
@@ -15,21 +15,32 @@ 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="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 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>
     </div>
   );
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index f3d1730209..70491f4800 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,4 +1,6 @@
 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";
 
@@ -13,7 +15,14 @@ import { AppRouterI18nProvider } from "./AppRouterI18nProvider";
 import { SpeculationRules } from "./SpeculationRules";
 import { Providers } from "./providers";
 
-import { fontHeading, fontSans } from "@coss/ui/fonts";
+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",
+});
 
 export const viewport = {
   width: "device-width",
@@ -105,8 +114,16 @@ 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={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased`}
+        className="dark:bg-default bg-subtle antialiased"
         style={
           isEmbed
             ? {
diff --git a/apps/web/app/notFoundClient.tsx b/apps/web/app/notFoundClient.tsx
index 2718e53c8f..2466cfbb1f 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-heading mt-2 text-4xl text-gray-900 sm:text-5xl">
+            <h1 className="font-cal mt-2 text-4xl font-extrabold 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-heading text-emphasis mt-2 text-4xl sm:text-5xl">
+          <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold 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 a024215090..9a689a1dac 100644
--- a/apps/web/components/PageWrapper.tsx
+++ b/apps/web/components/PageWrapper.tsx
@@ -10,6 +10,8 @@
 "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";
 
@@ -31,6 +33,15 @@ 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";
@@ -76,6 +87,12 @@ 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 6d0891efcc..61d9428a6b 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-heading text-emphasis ml-4 text-3xl">{name}</h1>
+              <h1 className="font-cal 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 38d1bdccaf..e79dbc2ea6 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-heading mb-3 text-[28px] capitalize leading-7">{title}</p>
+        <p className="font-cal mb-3 text-[28px] font-medium 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 19a816164a..cb78efa728 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-heading! text-xl" id="modal-title">
+          <h3 className="text-emphasis !font-cal text-semibold text-xl font-medium" 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 5953ed557d..837db6f9a3 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 font-heading mb-4 flex underline"
+          className="text-emphasis text-semibold font-cal 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 8afd26bb5a..7111803332 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-heading text-emphasis text-6xl">{statusCode}</h1>
+          <h1 className="font-cal 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 c0e2c02a83..b20c0573d8 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-heading text-emphasis text-lg leading-6">
+            <h2 className="font-cal text-emphasis text-lg font-medium 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 d61a341342..59928e33be 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-heading text-emphasis text-lg leading-6">{t("2fa")}</h2>
+            <h2 className="font-cal text-emphasis text-lg font-medium 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 5b48c1b49f..0fbad2a581 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-heading text-emphasis text-lg leading-6" id="modal-title">
+        <h3 className="font-cal text-emphasis text-lg font-medium 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 39c03c26f0..bfbf086ae4 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-heading text-emphasis mb-1 text-xl leading-5 tracking-wide">
+          <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold 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 a95dc24f0c..e7168fb46e 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-heading text-emphasis text-xl">{t("agplv3_license")}</h2>
+            <h2 className="font-cal 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-heading text-emphasis text-xl">{t("custom_plan")}</h2>
+              <h2 className="font-cal 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 17109e940e..5250018464 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-heading text-emphasis text-xl">{t("agplv3_license")}</h2>
+            <h2 className="font-cal 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-heading text-emphasis text-xl">{t("enter_license_key")}</h2>
+            <h2 className="font-cal 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 feebaad064..3846d94447 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-heading text-emphasis text-center text-3xl">{props.heading}</h2>}
+        {props.heading && <h2 className="font-cal 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/packages/coss-ui/src/fonts/CalSans-SemiBold.woff2 b/apps/web/fonts/CalSans-SemiBold.woff2
similarity index 100%
rename from packages/coss-ui/src/fonts/CalSans-SemiBold.woff2
rename to apps/web/fonts/CalSans-SemiBold.woff2
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 5d096d9a07..66056bf1f4 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-heading text-emphasis mt-6 text-center text-3xl">
+          <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">
             {t("password_updated")}
           </h2>
         </div>
@@ -41,7 +41,7 @@ function Expired() {
     <>
       <div className="stack-y-6">
         <div>
-          <h2 className="font-heading text-emphasis mt-6 text-center text-3xl">{t("whoops")}</h2>
+          <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">{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 c025cb4386..36ab3dca21 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-heading text-emphasis my-6 text-2xl leading-none">
+          <h3 className="font-cal text-emphasis my-6 text-2xl font-normal 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 77a5af5db0..4c1c565de0 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-heading text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
+      <h1 className="font-cal 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 bad61e5e76..59df75a065 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-heading mb-4 text-3xl">{title}</h2>
+      <h2 className="font-cal 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 6a8b95325f..c7d50efd98 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-heading text-lg">{t("submitted_feedback")}</h2>
+                        <h2 className="font-cal 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 a36b0fe757..8b8d26890c 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-heading text-emphasis mb-2 text-xl tracking-wide">
+            <h2 className="font-semi-bold font-cal 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-heading text-emphasis text-xl tracking-wide">
+            <h2 className="font-semi-bold font-cal 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 764ae0566e..65ccdf9c95 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-heading text-emphasis text-xl tracking-wide">
+              <h2 className="font-semi-bold font-cal 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 578223afcb..ee9be9a014 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-heading text-cal flex space-x-1 text-xl leading-none">
+          <div className="font-cal text-cal flex space-x-1 text-xl font-semibold 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 2aa9aad352..934af85733 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-heading text-cal flex space-x-1 text-xl leading-none">
+          <div className="font-cal text-cal flex space-x-1 text-xl font-semibold 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 33bae21949..e026472d1c 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-heading text-emphasis mt-6 text-xl leading-none">
+            <h2 className="font-cal text-emphasis mt-6 text-xl font-semibold 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 c0c3204fdb..1c8f2caae5 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-heading text-default text-lg leading-4">
+              <h3 className="font-cal text-default text-lg font-semibold 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 0341960b34..dd262d500d 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-heading text-emphasis text-2xl leading-none">
+              <h2 className="font-cal 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 a6ec5ece92..1a5561b921 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-heading text-emphasis text-2xl">{t("payment_failed")}</h1>
+          <h1 className="font-cal 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-heading text-emphasis text-2xl">{t("payment_successful")}</h1>
+        <h1 className="font-cal 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 39ae8c6cd7..fd38ca0ae4 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-heading text-emphasis text-xl tracking-wide">
+          <h2 className="font-semi-bold font-cal 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 7ed5c850c8..6c42da590b 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-heading text-emphasis text-xl tracking-wide">
+            <h2 className="font-semi-bold font-cal 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 f021e7a0eb..5c99c12112 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-heading! text-xl" id="modal-title">
+              <h3 className="text-emphasis !font-cal text-semibold text-xl font-medium" 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 c7cb437ff2..2fcfa3052b 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="font-heading mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
+          <h2 className="text-semibold font-cal 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 919efbd671..62b312d41f 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-heading text-emphasis mb-2 text-2xl leading-none" id="modal-title">
+        <h3 className="font-cal text-emphasis mb-2 text-2xl font-semibold 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 9cac06b356..fe5cfd5d16 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-heading mb-3 text-[28px] leading-7">
+                <p className="font-cal mb-3 text-[28px] font-medium 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 c2f85e4c58..c97a537748 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-heading text-xl leading-6">{title}</h1>
+              <h1 className="font-cal text-xl font-semibold 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-[size] ${
+            className={`flex h-full min-h-0 w-full flex-1 flex-col gap-4 [container-type: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 8f4655a44b..79e4dc5d84 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-heading w-full text-left text-xl leading-tight">
+                <h2 className="text-emphasis font-cal w-full text-left text-xl font-semibold 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 8c07690568..e05909ecda 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-heading text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
+            <h2 className="font-cal 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 4f507a119b..f72443d2f5 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-heading text-xl leading-6">{title}</h1>
+            <h1 className="font-cal text-xl font-semibold 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 82e3d7d75a..40bbd6cbd1 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-heading text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
+            <h2 className="font-cal 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 0ec5e488df..64531c187a 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-heading text-emphasis mb-1 text-xl leading-5 tracking-wide">
+                <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold 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 5a4e33b948..4c38aa4e05 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-heading text-emphasis mb-1 text-xl leading-5 tracking-wide">
+                <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold 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 504baf94cc..9e8e672ff0 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-heading text-emphasis mb-1 text-xl leading-5 tracking-wide">
+                <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold 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 251f3314a5..cff4b55c7c 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-heading text-emphasis text-lg leading-6">
+            <h2 className="font-cal text-emphasis text-lg font-medium 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 477d83a253..25221d8d12 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-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",
+                      "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",
                       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 07afb93320..8545182bdc 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-heading mt-4 text-2xl sm:text-3xl")}>{title}</h1>
+          <h1 className={classNames("font-cal 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-heading text-emphasis mt-4 text-lg">{feature.title}</h2>
+            <h2 className="font-cal 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 59c59482de..fe454857c9 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-heading text-emphasis text-2xl leading-none">
+            <h2 className="font-cal 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 c9e3d10e96..4ca7c48932 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-heading text-[28px] leading-none ">
+              <h1 className="font-cal 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 88b6aba5c7..aad900a32b 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-heading text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
+            <h2 className="font-cal 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-heading text-emphasis mb-2 text-2xl tracking-wider" data-testid="team-name">
+          <p className="font-cal  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 0d911e42c2..7fae8d32fb 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-heading text-emphasis mb-1 text-xl", isOrg && user.profile.organization?.bannerUrl ? "" : "mt-4")} data-testid="name-title">
+              <h1 className={classNames("font-cal 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 c74b082f29..4fef528f17 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-heading text-default mb-2 text-center text-lg">
+                    <h2 className="font-cal text-default mb-2 text-center text-lg font-medium">
                       {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 3b77f46f50..09d0dcbd91 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-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">
+        <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">
           <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 536cc83df7..e3cffc6f7f 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -4,7 +4,6 @@ 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";
@@ -83,7 +82,7 @@ class MyDocument extends Document<Props> {
         </Head>
 
         <body
-          className={`${fontSans.variable} ${fontHeading.variable} font-sans dark:bg-default bg-subtle antialiased`}
+          className="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 c5d4797f73..b2d293c7f2 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-heading mb-2 text-2xl">{t("app_not_installed")}</h3>
+        <h3 className="font-cal mb-2 text-2xl font-semibold">{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 074429d1ba..bb4ec2b57a 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-heading text-emphasis text-xl" id="modal-title">
+        <h3 className="font-cal 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 2f013e4e37..f09ee8b2f8 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-heading: var(--font-heading);
+  --font-cal: var(--font-cal);
 
   /* 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 639a43beb3..235af2d599 100644
--- a/packages/coss-ui/package.json
+++ b/packages/coss-ui/package.json
@@ -6,8 +6,7 @@
     "./styles.css": "./src/styles/globals.css",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/*.tsx",
-    "./hooks/*": "./src/hooks/*.ts",
-    "./fonts": "./src/fonts/index.ts"
+    "./hooks/*": "./src/hooks/*.ts"
   },
   "scripts": {
     "lint": "biome lint src",
diff --git a/packages/coss-ui/src/fonts/CalSansUI[MODE,wght].woff2 b/packages/coss-ui/src/fonts/CalSansUI[MODE,wght].woff2
deleted file mode 100644
index d353c58932..0000000000
Binary files a/packages/coss-ui/src/fonts/CalSansUI[MODE,wght].woff2 and /dev/null differ
diff --git a/packages/coss-ui/src/fonts/README.md b/packages/coss-ui/src/fonts/README.md
deleted file mode 100644
index a9ee08dd24..0000000000
--- a/packages/coss-ui/src/fonts/README.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# 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
deleted file mode 100644
index 0ceaec8905..0000000000
--- a/packages/coss-ui/src/fonts/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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 6ee10a5086..9d6944cfa7 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-heading text-emphasis mb-1 text-xl leading-5 tracking-wide">
+                <h1 className="font-cal text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
                   {title}
                 </h1>
               ) : (
diff --git a/packages/platform/atoms/globals.css b/packages/platform/atoms/globals.css
index 70eb1d50a1..980d0396e2 100644
--- a/packages/platform/atoms/globals.css
+++ b/packages/platform/atoms/globals.css
@@ -242,6 +242,7 @@
       "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);
@@ -4948,14 +4949,14 @@
   .align-top {
     vertical-align: top;
   }
-  .\!font-heading {
-    font-family: var(--font-heading) !important;
+  .\!font-cal {
+    font-family: var(--font-cal) !important;
   }
   .font-\(family-name\:--font-sans\) {
     font-family: var(--font-sans);
   }
-  .font-heading {
-    font-family: var(--font-heading);
+  .font-cal {
+    font-family: var(--font-cal);
   }
   .font-mono {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New,
@@ -9269,8 +9270,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-heading :where(h3):not(:where([class~="not-prose"] *)) {
-    font-family: var(--font-heading);
+  .prose-h3\:font-cal :where(h3):not(:where([class~="not-prose"] *)) {
+    font-family: var(--font-cal);
   }
   .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 ca768bc7c6..ceadfa9046 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-heading",
+      className: "text-sm font-cal",
     },
     {
       variant: "SidebarCard",
@@ -107,7 +107,7 @@ const cvaCardTypeByVariant = cva("", {
     {
       variant: "NewLaunchSidebarCard",
       structure: "title",
-      className: "text-sm font-heading text-white",
+      className: "text-sm font-cal text-white",
     },
     {
       variant: "NewLaunchSidebarCard",
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 8b78c163b5..218174938f 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-heading text-emphasis mt-2 text-xl">
+          <DialogPrimitive.Title className="font-cal 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 16fefe8077..27f52c03a7 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-emphasis font-heading mb-1 text-xl"
+        className="text-semibold text-emphasis font-cal 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 a7ecf2ae0b..5ef55d3596 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(
-              "font-heading text-emphasis text-center text-xl normal-nums",
+              "text-semibold font-cal 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 84396e71c2..2ca737ad90 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-heading text-emphasis text-2xl" data-testid="step-title">
+          <h1 className="font-cal 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 6fa6b1ff27..5506495c73 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-heading mb-3 text-[28px] leading-7">
+                    <p className="font-cal mb-3 text-[28px] font-medium leading-7">
                       {title.replace(` | ${APP_NAME}`, "")}&nbsp;
                     </p>
                     <p className="text-subtle font-sans text-sm font-normal">{subtitle}&nbsp;</p>