Hello, I am attempting to use cal-sans inside of the Next.js App Rou

As far as I can tell though (from <a href="https://github.com/calcom/cal.com/blob/ea67

My solution to implement the font inside a NextJs app <div class="highlight highli

Usage with the Next JS app router about font HOT 5 OPEN

calcom commented on June 1, 2024

Usage with the Next JS app router

from font.

Comments (5)

agustif commented on June 1, 2024

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

from font.

Lermatroid commented on June 1, 2024

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?

from font.

ceIia commented on June 1, 2024

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

from font.

agustif commented on June 1, 2024

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

from font.

VGontier-cmd commented on June 1, 2024

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>

from font.

Usage with the Next JS app router about font HOT 5 OPEN

Comments (5)

Related Issues (5)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent