Next.js Discord

Discord Forum

How to dynamically change font family, pass some data to the layout?

Unanswered
Omm🚀 posted this in #help-forum
Open in Discord
Omm🚀OP
So I am building an app where there is a dialog box and user can change font family and size from it but how can pass the font names to the layout page to change the font family of whole app???

13 Replies

Omm🚀OP
Am using Tailwind
riský
you can still use varables with tailwind
Omm🚀OP
Yeah but how can i change the font family and pass data so that I can change the position of a component
Siberian Flycatcher
How do you want to store the user's choice? DB? LocalStorage? Etc...
Omm🚀OP
Wait I'll make it open source
Omm🚀OP
I messed the code lol
Where they select an font and the whole website changes to that font
Siberian Flycatcher
I want to store the user's choice

Where do you want to store it? In DB? localStorage? Cookies?
Omm🚀OP
No like i want to reflect the font family when user choices an option
Siberian Flycatcher
Do you have the repo with your code?
Z4NR34L
You need to load all fonts into application, and later attach it's variable class to component that you want to use it inside.

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}


you can just import more fonts and use for example clsx for choosing which one should be used just like:

return (
  <div className={clsx(isInterNeeded && inter.className)}>
    <p>Smth</p>
  </div>
)


Hope that will clarify it even a bit 😄