Next.js Discord

Discord Forum

Is it possible to apply font based on text language?

Unanswered
Chum salmon posted this in #help-forum
Open in Discord
Chum salmonOP
Do you guys have some tricks to automatically detect language and apply different font accordingly?
So far I have two fonts in my layout.tsx like this:
<html lang="en" className={`${inter.variable} ${aktiv.variable} antialiased`}>

In global.css, I have something like this:
@layer base {
    html:lang(en) {
        font-family: var(--font-inter), sans-serif;
      }
      
      html:lang(th) {
        font-family: var(--font-aktiv), sans-serif;
      }

The problem is it will only use one font depending on the lang property in the <html> tag of the layout.
Is it even possible to apply the correct font based on the language of the characters?

8 Replies

American black bear
store locale somewhere in state such as url, localstorage, database or combination of these. Let's call this variable locale and create a hook or set of functions to access and change it easily.

Then we can use next/font to import multiple fonts and switch based on locale in the root layout. With url ordatabase implementation you can probably do this whole thing server side e.g www.example.com/[locale]/your-app

import { Inter, Roboto_Mono } from 'next/font/google'
 
export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export const roboto = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

export default function Layout({ children }: { children: React.ReactNode }) {
  // store in url, database, localstorage, etc.
  // depending on your use case
  const locale = getLocale()

  const font = locale === "en" ? inter.className : roboto.className

  return (
    <html lang="en" className={font}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}
Jboncz
Are you using i18n for translations?
If so you can also use https://www.i18next.com/overview/api#resolvedlanguage
Chum salmonOP
correct me if I'm wrong but from what I read both of the above methods apply 1 font to the entire page based on the language.
This is not what I'm aiming for.
I want to use 2 fonts in 1 page and apply them to specific language.
For example, the navbar has HOME | ABOUT | CONTACT and I want to keep it Inter font. Then the content of the page have some Thai language on it and I want to apply Aktiv font only to those Thai letters.
I can manually do it but I'm looking for a way to automatically apply a specific font to a specific language.
Jboncz
It would require the library to automatically knnow the language? Make a text wrapper that you pass in a specific key to maybe?
<TextL la='en'></TextL
<TextL la='thai'></TextL
or better yet you would only ahve to use that when you dont want to use default font you have set.
A component that automatically knows the language and applies a different font style, and supporting multiple fonts on a page Idk how you would do that