prathamesh-dukare/app.js

## app.js
import { Lato } from 'next/font/google'
import { DM_Sans } from 'next/font/google'

const lato = Lato({
  weight: ['100', '300', '400', '700', '900'],
  subsets: ['latin'],
  variable: '--font-lato',
})

const dm_sans = DM_Sans({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
  variable: '--font-dm-sans',
})

// Now you can use it by two ways in app

// 1. Use variable

import React from 'react'

import { Lato } from 'next/font/google'
import { DM_Sans } from 'next/font/google'

const lato = Lato({
  weight: ['100', '300', '400', '700', '900'],
  subsets: ['latin'],
  variable: '--font-lato',
})

const dm_sans = DM_Sans({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
  variable: '--font-dm-sans',
})

export default function App({ Component, pageProps }) {

  return (
    <Provider store={store}>
      <ToastContainer
        closeButton={CloseButton}
        toastClassName="scattr-toast"
        hideProgressBar
        position="top-center"
        autoClose={1200}
      />

      <AuthComponent>
        <main
          className={`${dm_sans?.variable}`}>
          <Head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
          </Head>
          <Component {...pageProps} />
        </main>
      </AuthComponent>
    </Provider>
  )
}


// 2. use classname

className={`${dm_sans?.className}`}>


// both ways are good, className and variable both works the same way but you need to understand nuances
	import { Lato } from 'next/font/google'
	import { DM_Sans } from 'next/font/google'

	const lato = Lato({
	weight: ['100', '300', '400', '700', '900'],
	subsets: ['latin'],
	variable: '--font-lato',
	})

	const dm_sans = DM_Sans({
	weight: ['400', '500', '700'],
	subsets: ['latin'],
	variable: '--font-dm-sans',
	})

	// Now you can use it by two ways in app

	// 1. Use variable

	import React from 'react'

	import { Lato } from 'next/font/google'
	import { DM_Sans } from 'next/font/google'

	const lato = Lato({
	weight: ['100', '300', '400', '700', '900'],
	subsets: ['latin'],
	variable: '--font-lato',
	})

	const dm_sans = DM_Sans({
	weight: ['400', '500', '700'],
	subsets: ['latin'],
	variable: '--font-dm-sans',
	})

	export default function App({ Component, pageProps }) {

	return (
	<Provider store={store}>
	<ToastContainer
	closeButton={CloseButton}
	toastClassName="scattr-toast"
	hideProgressBar
	position="top-center"
	autoClose={1200}
	/>

	<AuthComponent>
	<main
	className={`${dm_sans?.variable}`}>
	<Head>
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1"
	/>
	</Head>
	<Component {...pageProps} />
	</main>
	</AuthComponent>
	</Provider>
	)
	}



	// 2. use classname

	className={`${dm_sans?.className}`}>



	// both ways are good, className and variable both works the same way but you need to understand nuances