Usage with the Next JS app router

Lermatroid commented 1 year ago

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 1 year ago

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 https://github.com/calcom/cal.com/pull/6346

Lermatroid commented 1 year ago

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 1 year ago

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

agustif commented 1 year ago

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 5 months ago

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>

calcom / font

Usage with the Next JS app router #6