Loading multiple fonts with @next/font within _app #44239

dextermb · 2022-12-21T19:47:53Z

dextermb
Dec 21, 2022

Hey gang,

I'm looking at moving the loading of the fonts we use to @next/fonts. I'm attempting to load: IBM_Plex_Sans and IBM_Plex_Mono within _app.tsx but it seems like only the first font actually loads.

Here's my set up (to work with Tailwind):

import { ReactElement } from 'react'
import { AppProps } from 'next/app'
import { Provider } from 'react-redux'
import { IBM_Plex_Mono, IBM_Plex_Sans } from '@next/font/google'
import Head from 'next/head'

import { store } from '~/stores'

import '../styles/globals.css'

const sans = IBM_Plex_Sans({
  weight: ['400'],
  subsets: ['latin']
})

const mono = IBM_Plex_Mono({
  weight: ['400'],
  subsets: ['latin']
})

export default function App ({ Component, pageProps }: AppProps): ReactElement {
  return (
    <>
      <Head>
        <title>project</title>
      </Head>
      <style jsx global>{`:root {
        --font-google-ibm-plex-sans: ${sans.style.fontFamily};
        --font-google-ibm-plex-mono: ${mono.style.fontFamily};
      }`}</style>
      <Provider store={store}>
        <Component
          {...pageProps}
        />
      </Provider>
    </>
  )
}

When I then attempt to wrap Component in main with the classNames font-sans or font-mono I see that only IBM_Plex_Sans is loaded, but when commenting it out I can then see that IBM_Plex_Mono is loaded.

Any ideas how I can load both fonts easily?

ciruz · 2022-12-22T18:01:55Z

ciruz
Dec 22, 2022

you can also define a variable within the font itself, like so

const sans = IBM_Plex_Sans({
  weight: ['400'],
  subsets: ['latin'],
  variable: '--font-ibm-plex-sans'
})

And use it in css:

font-family: var(--font-ibm-plex-sans);

Maybe this works?

1 reply

dextermb Dec 23, 2022
Author

This does not work, this simply just creates a class that sets the CSS variable. Loading still causes issues.

The reason why I'm not using the variable option is so that I can set the dynamic font-family against :root.

pruhstal · 2023-02-05T03:38:14Z

pruhstal
Feb 5, 2023

@dextermb if you're still trying to figure this out -- see if this works for you: #41872 (reply in thread)

3 replies

dextermb Feb 5, 2023
Author

Hey 👋🏻 thanks for sharing. This doesn't seem to be the issue I'm having.

Note I'm assigning css variables so the font-family css rule is not being duplicated.

Instead the issue I was seeing is that only the first font would be loaded and the second ignored.

It maybe as simple as splitting the loaders into separate files but this would seem like a work around.

However I haven't tested recently so I'll try recreating again shortly

pruhstal Mar 28, 2023

@dextermb I actually just ended up using :

  <style jsx global>{`
    :root {
      --font-Inter: ${inter.style.fontFamily};
      --font-Another: ${another.style.fontFamily};
     ... // more fonts in here
    }
  `}</style>

and then in my tailwind.config.js:

  fontFamily: {
    inter: ['var(--font-Inter)', ...defaultTheme.fontFamily.sans],
    another: ['var(--font-Another)', ...defaultTheme.fontFamily.sans]
  },

dextermb Mar 28, 2023
Author

Yeah, this was my intention as well.

However at the time of creating this discussion it seems like there was a bug around loading multiple fonts.

Did you not run into this issue?

markyuna · 2024-05-05T15:11:02Z

markyuna
May 5, 2024

const IBMPlex = IBM_Plex_Sans({
subsets: ['latin'],
weights: ['400'],
variable: '--font-ibm-plex-sans'
});

i hve a problem with the variable:

Type 'string' is not assignable to type 'undefined'.ts(2322)
index.d.ts(5665, 5): The expected type comes from property 'variable' which is declared here on type '{ weight: "400" | "100" | "200" | "300" | "500" | "600" | "700" | ("400" | "100" | "200" | "300" | "500" | "600" | "700")[]; style?: "normal" | "italic" | ("normal" | "italic")[] | undefined; ... 5 more ...; subsets?: ("cyrillic" | ... 4 more ... | "vietnamese")[] | undefined; }'
⚠ Error (TS2322) |
Type
is not assignable to type
.
(property) variable?: undefined

1 reply

akshay-zen-wiz Jan 6, 2025

I got this working use this

import type { Metadata } from "next";
import { IBM_Plex_Sans } from "next/font/google";
import "./globals.css";

// Apply the IBM Plex Sans font to the variable
const ibmPlexSans = IBM_Plex_Sans({
  variable: "--font-ibm-plex-sans",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"], // Regular, Medium, Semi-Bold, and Bold
});

export const metadata: Metadata = {
  title: "Zenwiz",
  description: "AI virtual assistant",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${ibmPlexSans.variable} antialiased`}
        style={{ fontFamily: "var(--font-ibm-plex-sans), sans-serif" }}
      >
        {children}
      </body>
    </html>
  );
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loading multiple fonts with @next/font within _app #44239

{{title}}

Replies: 3 comments 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Loading multiple fonts with @next/font within _app #44239

dextermb Dec 21, 2022

Replies: 3 comments · 5 replies

ciruz Dec 22, 2022

dextermb Dec 23, 2022 Author

pruhstal Feb 5, 2023

dextermb Feb 5, 2023 Author

pruhstal Mar 28, 2023

dextermb Mar 28, 2023 Author

markyuna May 5, 2024

akshay-zen-wiz Jan 6, 2025

dextermb
Dec 21, 2022

Replies: 3 comments 5 replies

ciruz
Dec 22, 2022

dextermb Dec 23, 2022
Author

pruhstal
Feb 5, 2023

dextermb Feb 5, 2023
Author

dextermb Mar 28, 2023
Author

markyuna
May 5, 2024