How is font being applied here?

Unanswered

Genio posted this in #help-forum

2024-02-07T08:10:28.000Z

I am following the admin-dashboard tutorial from the next.js website. They are adding a font but i dont understand what they did

 import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body> //the class name part 
    </html>
  );
}

This is the font.tsx

import {Inter } from 'next/font/google' 

export const inter = Inter({ subsets: ['latin'] })

2 Replies

GenioOP

2024-02-07T12:06:43.000Z

bump

@Genio I am following the admin-dashboard tutorial from the next.js website. They are adding a font but i dont understand what they did tsx import '@/app/ui/global.css'; import { inter } from '@/app/ui/fonts'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={`${inter.className} antialiased`}>{children}</body> //the class name part </html> ); } This is the font.tsx tsx import {Inter } from 'next/font/google' export const inter = Inter({ subsets: ['latin'] })

Asiatic Lion

2024-02-08T14:13:35.000Z

They're importing a font (Inter) from Google Fonts and then attach a css class to the body element.
Inspect body tag in your browser, look at css classes.