Last active
March 9, 2024 05:24
-
-
Save prathamesh-dukare/f9716885f472530767a89dda2368d013 to your computer and use it in GitHub Desktop.
Ways of using next-font in nextjs project
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment