Exploring Next.js Font Styling and Utilizing CSS Variables

Question

Exploring Next.js Font Styling and Utilizing CSS Variables

I'm attempting to implement the "next" method for adding fonts, but I find the process described quite complex just to preload a font.

I experimented with exporting a function to create the font and then using a variable tag to generate a CSS variable. However, this approach was unsuccessful even after importing the font into my page.js file. I exported a constant function to create the font with the variable:

import { Oxygen } from "next/font/google";

export const oxygen = Oxygen({
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})

Subsequently, I attempted to apply it in the linked CSS style sheet by setting the font family to the precise variable like so:

font-family: var(--font-oxygen);

My exploration of Nextjs is becoming discouraging due to this issue. The font doesn't seem to load properly, and I am hesitant to assign the class name of my HTML attributes to the font's class name unless I am misunderstanding something.

javascript css next.js fonts

Answer 1

Answer №1

Make sure to utilize the font's font.variable approach instead of the font.className method.

import { Oxygen } from 'next/font/google'
 
const oxygen = Oxygen({ 
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={oxygen.variable}> // USE .variable, NOT .className
      <Component {...pageProps} />
    </main>
  )
}

You can now apply that variable to any css class:

.text {
  font-family: var(--font-oxygen);
}

Please Note: While this is effective with app router, its compatibility with page router remains uncertain.

This technique should also pre-load the font, preventing flickering during page loading.

Answer 2

Make sure to utilize the font's font.variable approach instead of the font.className method.

import { Oxygen } from 'next/font/google'
 
const oxygen = Oxygen({ 
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={oxygen.variable}> // USE .variable, NOT .className
      <Component {...pageProps} />
    </main>
  )
}

You can now apply that variable to any css class:

.text {
  font-family: var(--font-oxygen);
}

Please Note: While this is effective with app router, its compatibility with page router remains uncertain.

This technique should also pre-load the font, preventing flickering during page loading.

Answer 3

Answer №2

If you want to use a specific font throughout your entire application, you can easily import it in the index.js file (if using Pages Router) or in the layout.js file located in your app folder (if using App Router). There is no need to manually add it to your CSS.

Simply include classname={oxygen.className}

Here's an example for using Pages Router:

import { Oxygen } from 'next/font/google'
 
const oxygen = Oxygen({ 
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={oxygen.className}>
      <Component {...pageProps} />
    </main>
  )
}

Answer 4

If you want to use a specific font throughout your entire application, you can easily import it in the index.js file (if using Pages Router) or in the layout.js file located in your app folder (if using App Router). There is no need to manually add it to your CSS.

Simply include classname={oxygen.className}

Here's an example for using Pages Router:

import { Oxygen } from 'next/font/google'
 
const oxygen = Oxygen({ 
    display: 'swap',
    variable: '--font-oxygen',
    subsets: ['latin'],
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={oxygen.className}>
      <Component {...pageProps} />
    </main>
  )
}

Answer 5

Answer №3

The information provided on this topic is quite lacking, but here is a solution I have come up with for loading multiple fonts:

Within the layout.tsx file of a project using an App Router:

import { customFont1, customFont2, customFont3} from "styles/customFonts";

const customFonts = [customFont1, customFont2, customFont3];
const customFontsClassName = customFonts.map((font) => font.variable).join(" ");

export default function MainLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body className={customFontsClassName}>
        <ThemeProvider> // if using a theme provider
          <GlobalStyles>
            {children}
          </GlobalStyles>
        </ThemeProvider>
      </body>
    </html>
  );
}

The font styles in styles/customFonts would look something like this:

const customFont1 = MyCustomFont1({ 
    display: 'swap',
    variable: '--font-custom1',
})
const customFont2 = MyCustomFont2({ 
    display: 'swap',
    variable: '--font-custom2',
})
const customFont3 = MyCustomFont3({ 
    display: 'swap',
    variable: '--font-custom3',
})

Answer 6

The information provided on this topic is quite lacking, but here is a solution I have come up with for loading multiple fonts:

Within the layout.tsx file of a project using an App Router:

import { customFont1, customFont2, customFont3} from "styles/customFonts";

const customFonts = [customFont1, customFont2, customFont3];
const customFontsClassName = customFonts.map((font) => font.variable).join(" ");

export default function MainLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body className={customFontsClassName}>
        <ThemeProvider> // if using a theme provider
          <GlobalStyles>
            {children}
          </GlobalStyles>
        </ThemeProvider>
      </body>
    </html>
  );
}

The font styles in styles/customFonts would look something like this:

const customFont1 = MyCustomFont1({ 
    display: 'swap',
    variable: '--font-custom1',
})
const customFont2 = MyCustomFont2({ 
    display: 'swap',
    variable: '--font-custom2',
})
const customFont3 = MyCustomFont3({ 
    display: 'swap',
    variable: '--font-custom3',
})

Exploring Next.js Font Styling and Utilizing CSS Variables

Answer №1

Answer №2

Answer №3

Similar questions

Using JavaScript to disable and re-enable an ASP.NET Timer control

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

Utilize JQuery's .load() function to transmit JSON data to your Flask server

The usage of arrow functions in ReactJS programming

JavaScript Conversion of Characters to ASCII Values

When a function is transferred from a parent component to a child component's Input() property, losing context is a common issue

I am unable to use the "@" symbol to search for files in the Next platform

Troubles encountered with switching npm registry

Error: An attempt to make changes to a database that does not permit mutations has resulted in an InvalidStateError

Oops! The program encountered an issue where it was unable to access the properties of an undefined variable, specifically while trying to

Tips to store Google fonts in the assets directory

Why is this component not functioning properly?

Getting js.map Files to Function Properly with UMD Modules

Is there a way to ensure a dialog box is positioned in the center of the window?

Provide a parameter for a function's callback

Primeng - Concealed dropdown values within a scrollable table header

Is there a way to sort through nested objects with unspecified keys?

Ways to examine a JavaScript Bound Function

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Permit the use of HTML tags within a CSS-only tooltip