diff --git a/apps/storybook/styles/globals.css b/apps/storybook/styles/globals.css
index e375a7ba75..115058d60a 100644
--- a/apps/storybook/styles/globals.css
+++ b/apps/storybook/styles/globals.css
@@ -2,4 +2,9 @@
@tailwind components;
@tailwind utilities;
-@import "../../../packages/ui/styles/shared-globals.css"
+@import "../../../packages/ui/styles/shared-globals.css";
+
+:root {
+ --font-inter: "Inter var";
+ --font-cal: "Cal Sans";
+}
diff --git a/apps/web/fonts/CalSans-SemiBold.woff2 b/apps/web/fonts/CalSans-SemiBold.woff2
new file mode 100644
index 0000000000..36d71b70d0
Binary files /dev/null and b/apps/web/fonts/CalSans-SemiBold.woff2 differ
diff --git a/apps/web/package.json b/apps/web/package.json
index a85770f508..859d873e50 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -45,6 +45,7 @@
"@hookform/resolvers": "^2.9.7",
"@next-auth/prisma-adapter": "^1.0.4",
"@next/bundle-analyzer": "^12.2.5",
+ "@next/font": "^13.1.1",
"@radix-ui/react-avatar": "^1.0.0",
"@radix-ui/react-collapsible": "^1.0.0",
"@radix-ui/react-dialog": "^1.0.0",
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index a086947b01..5528fdd145 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,3 +1,5 @@
+import { Inter } from "@next/font/google";
+import localFont from "@next/font/local";
import { DefaultSeo } from "next-seo";
import Head from "next/head";
import Script from "next/script";
@@ -14,6 +16,14 @@ import I18nLanguageHandler from "@components/I18nLanguageHandler";
import "../styles/globals.css";
+const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const calFont = localFont({
+ src: "../fonts/CalSans-SemiBold.woff2",
+ variable: "--font-cal",
+ preload: true,
+ display: "swap",
+});
+
function MyApp(props: AppProps) {
const { Component, pageProps, err, router } = props;
let pageStatus = "200";
@@ -46,6 +56,12 @@ function MyApp(props: AppProps) {
id="page-status"
dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
/>
+
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index eddbff9943..cd0201dc54 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -39,14 +39,6 @@ class MyDocument extends Document {
-
-
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index f538905811..8ecebefc06 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;
-@import "../../../packages/ui/styles/shared-globals.css";
+
body {
text-rendering: optimizeLegibility;
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 780e9a5796..15d9f2ef21 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -1,4 +1,5 @@
const plugin = require("tailwindcss/plugin");
+const { fontFamily } = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
@@ -12,10 +13,6 @@ module.exports = {
],
darkMode: "class",
theme: {
- fontFamily: {
- cal: ['"Cal Sans"', "sans-serif"],
- sans: ['"Inter var"', "sans-serif"],
- },
extend: {
colors: {
/* your primary brand color */
@@ -162,9 +159,9 @@ module.exports = {
dropdown: "0px 2px 6px -1px rgba(0, 0, 0, 0.08)",
},
fontFamily: {
- cal: ['"Cal Sans"', "sans-serif"],
+ cal: ["var(--font-cal)", ...fontFamily.serif],
+ sans: ["var(--font-inter)", ...fontFamily.sans],
mono: ["Roboto Mono", "monospace"],
- sans: ['"Inter var"', "sans-serif"],
},
maxHeight: (theme) => ({
0: "0",