feat: use @next/font for font loading (#6346)

Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
calcom · Feb 17, 2023 · 1433ec6 · 1433ec6
1 parent 48e5d18
commit 1433ec6
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 16 deletions.
diff --git 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
diff --git 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
@@ -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}'` }}
       />
+      <style jsx global>{`
+        :root {
+          --font-inter: ${interFont.style.fontFamily};
+          --font-cal: ${calFont.style.fontFamily};
+        }
+      `}</style>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>

diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
@@ -39,14 +39,6 @@ class MyDocument extends Document<Props> {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" content="#ffffff" />
-          <link
-            rel="preload"
-            href="/fonts/Inter-roman.var.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-          <link rel="preload" href="/fonts/cal.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
           <Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
         </Head>
 

diff --git 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
@@ -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",