font
font copied to clipboard
calcom
Usage with the Next JS app router
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!
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
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?
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
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>
