Usage with the Next JS app router #6
Comments
|
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 |
|
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'm curious too if this is the best practice or not :) |
|
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 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> |
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!
The text was updated successfully, but these errors were encountered: