calcom/font

Usage with the Next JS app router

Lermatroid opened this issue · 5 comments

Lermatroid commented

Hello,

I am attempting to use cal-sans inside of the Next.js App Router. What is the best way to go about doing this?

Currently I am importing it within my root layout, but it still seems to not be working. Thanks!

agustif commented

You could check out how it's been done on the packages/web cal app

It was recently upgraded to leverage @next/font in this PR if that helps calcom/cal.com#6346

Lermatroid commented

As far as I can tell though (from here), this was done by downloading the font file (not using the npm package) and putting it in the project? Is this the recommended way to do it?

ceIia commented

i'm curious too if this is the best practice or not :)

agustif commented

I have no idea about if it is -best practice- or not but seems so going from the nextjs docs, you could also leverage tailwindcss to reuse the local font https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts

VGontier-cmd commented

My solution to implement the font inside a NextJs app

// src/layout.tsx
const fontCal = localFont({
  src: '../assets/fonts/CalSans-SemiBold.woff2',
  variable: '--font-cal',
});

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  ...
  return (
    <html className="dark" style={{ colorScheme: 'dark' }}>
	<head />
	<body className={cn('min-h-screen bg-background antialiased', fontCal.variable)}>
          <main>{children}</main>
	</body>
    </html>
  );
}

Inside your tailwind.config.ts

import { fontFamily } from 'tailwindcss/defaultTheme';
export default {
  ...
  theme: {
    extend: {
      fontFamily: {
        ...
        heading: ['var(--font-cal)', ...fontFamily.sans],
      },
   }
}

Now you can use your font inside your className props

<p className="font-cal">
 My font heading
</p>