The next/font feature functions perfectly in all areas except for a single specific component

Question

The next/font feature functions perfectly in all areas except for a single specific component

New Experience with Next.js and Tailwind CSS

Exploring the next/font Package

Delving into the realm of the new next/font package has been quite interesting. Following the tutorial provided by Next.js made the setup process smooth sailing. I've incorporated both Inter and a custom local typeface named App Takeoff into my project. To seamlessly integrate these typefaces, I've leveraged Tailwind CSS, assigning Inter to font-sans and App Takeoff to font-display.

A Minor Glitch in the System

After rigorous testing across various files, it appears that everything is functioning flawlessly except within my Modal component. (Refer to the Helpful Update section below for insights on why the issue arises specifically in the Modal component.)

An Illustrative Example

index.tsx

https://i.sstatic.net/8MyTU.png

modal.tsx via index.tsx

https://i.sstatic.net/YrMVA.png

Although the typefaces function seamlessly outside the modal element, they encounter a glitch when embedded within it.

Key Code Snippets:

// app.tsx

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

import { Inter } from 'next/font/google'
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter'
})

import localFont from 'next/font/local'
const appTakeoff = localFont({
  src: [
    {
      path: '../fonts/app-takeoff/regular.otf',
      weight: '400',
      style: 'normal'
    },
    // additional font paths
  ],
  variable: '--font-app-takeoff'
})

// remaining code snippet continues...

// modal.tsx

import type { FunctionComponent } from 'react'
// more import statements...

const Modal: FunctionComponent<ModalProps> = ({ trigger, place = 'bottom', className, addClass, children }) => {

  // specific functions for modal handling

  return (
    <>
      {/* main functionality of the modal */}
    
    </>
  )
}

export default Modal

I trust this information provides clarity on the issue at hand. Feel free to reach out if further details are required.

Valuable Insight

Credit goes to Jonathan Wieben for shedding light on the root cause behind the malfunction (See Explanation). The essence lies in the scope of applied styles and the utilization of React's Portal component by Headless UI. Any suggestions on altering where the Portal renders or adjusting the style scope would be greatly appreciated. While Jonathan Wieben proposed a solution, my experimentation indicates that it may not align well with Tailwind CSS.

javascript css next.js fonts tailwind-css

Answer 1

Answer №1

The component you are using to render the dialog appears in a portal, as specified here.

It is recommended to render them as siblings to the root node of your React application for proper DOM ordering and display on top of existing UI elements.

To verify this setup, check if the modal's DOM element is located outside the wrapper from your App component (most likely it is).

If this is the case, the reason why the modal content does not appear with the intended font is because it is rendered outside the font-defining component.

To address this issue, consider defining your font at a higher level, such as in the head section as explained in the Next.js documentation.

Answer 2

The component you are using to render the dialog appears in a portal, as specified here.

It is recommended to render them as siblings to the root node of your React application for proper DOM ordering and display on top of existing UI elements.

To verify this setup, check if the modal's DOM element is located outside the wrapper from your App component (most likely it is).

If this is the case, the reason why the modal content does not appear with the intended font is because it is rendered outside the font-defining component.

To address this issue, consider defining your font at a higher level, such as in the head section as explained in the Next.js documentation.

Answer 3

Answer №2

I encountered the same issue while using headlessui, tailwind, and nextjs. The solution that was suggested seemed overly complicated for something as simple as a modal. I discovered that adding the font directly into the Modal component solved the problem:

//Modal.tsx
import { Dialog, Transition } from '@headlessui/react';
import { Rubik } from '@next/font/google';

const rubik = Rubik({
  subsets: ['latin'],
  variable: '--font-rubik',
});

type Props = {
  children: React.ReactNode;
  isOpen: boolean;
  closeModal: any;
};

const Modal = ({ children, isOpen, closeModal }: Props) => {
  return (
  <>
  <Transition ...>
    <Dialog ...>
    ...
        <Dialog.Panel
              className={`${rubik.variable} font-sans ...`}>
              ...
        </Dialog.Panel>
    </Dialog>
  </Transition>
  </>
    );
};
export default Modal;

It worked perfectly.

Answer 4

I encountered the same issue while using headlessui, tailwind, and nextjs. The solution that was suggested seemed overly complicated for something as simple as a modal. I discovered that adding the font directly into the Modal component solved the problem:

//Modal.tsx
import { Dialog, Transition } from '@headlessui/react';
import { Rubik } from '@next/font/google';

const rubik = Rubik({
  subsets: ['latin'],
  variable: '--font-rubik',
});

type Props = {
  children: React.ReactNode;
  isOpen: boolean;
  closeModal: any;
};

const Modal = ({ children, isOpen, closeModal }: Props) => {
  return (
  <>
  <Transition ...>
    <Dialog ...>
    ...
        <Dialog.Panel
              className={`${rubik.variable} font-sans ...`}>
              ...
        </Dialog.Panel>
    </Dialog>
  </Transition>
  </>
    );
};
export default Modal;

It worked perfectly.

Answer 5

Answer №3

A Fresh Approach

...not without its flaws...

This solution gets the job done, although it falls short of fully harnessing the power of loading next/font. Despite its limitations, it provides a quick fix for now.

The root of the problem lies in @headlessui/react rendering the Modal component as a direct child of the <body> element. To overcome this, we must apply the CSS variables generated by next/font directly to the <body> element, rather than the <div> element within the App component as outlined in the next/font documentation.

Regrettably, incorporating these variables is not as straightforward as with the <div> element. A more traditional JavaScript method is required, involving the addition of classes post-page load using document.querySelector('body') and className.add().

Optional Class Adding Function

In my implementation, I employ a custom function named addClass. While not mandatory, when attempting

body.classList.add(typefaceClasses)

, errors regarding invalid characters were raised.

If you opt for the addClass function, here is how it works:

(function () {
    // Code snippet goes here
})();

Integrating Classes with the Body Element

In the following example, observe our usage of useEffect:

// app.tsx

// Import statements and relevant code snippets go here

What Lies Ahead?

Perhaps in due time, a superior solution will emerge or the Next.js team will address default support for the <body> element.

Answer 6

A Fresh Approach

...not without its flaws...

This solution gets the job done, although it falls short of fully harnessing the power of loading next/font. Despite its limitations, it provides a quick fix for now.

The root of the problem lies in @headlessui/react rendering the Modal component as a direct child of the <body> element. To overcome this, we must apply the CSS variables generated by next/font directly to the <body> element, rather than the <div> element within the App component as outlined in the next/font documentation.

Regrettably, incorporating these variables is not as straightforward as with the <div> element. A more traditional JavaScript method is required, involving the addition of classes post-page load using document.querySelector('body') and className.add().

Optional Class Adding Function

In my implementation, I employ a custom function named addClass. While not mandatory, when attempting

body.classList.add(typefaceClasses)

, errors regarding invalid characters were raised.

If you opt for the addClass function, here is how it works:

(function () {
    // Code snippet goes here
})();

Integrating Classes with the Body Element

In the following example, observe our usage of useEffect:

// app.tsx

// Import statements and relevant code snippets go here

What Lies Ahead?

Perhaps in due time, a superior solution will emerge or the Next.js team will address default support for the <body> element.

Answer 7

Answer №4

No problems arise when utilizing the App Directory feature. Since it has officially launched out of beta phase, I strongly advise giving it a try.

Answer 8

No problems arise when utilizing the App Directory feature. Since it has officially launched out of beta phase, I strongly advise giving it a try.

Answer 9

Answer №5

// Start of code snippet

/********* including external libraries ****************/
import { Noto_Sans_TC } from '@next/font/google';
import CustomFont from '@next/font/local';
import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import type { ReactElement, ReactNode } from 'react';
import './styles.css';

// End of external libraries section

// Start of internal libraries section

export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const notoSansTC = Noto_Sans_TC({
  weight: ['300', '400', '700', '900'],
  subsets: ['chinese-traditional'],
  display: 'swap',
});

const chappaFont = CustomFont({
  src: '../public/fonts/chappa-Black.ttf',
  variable: '--font-chappa',
});
const cubic11 = CustomFont({
  src: '../public/fonts/Cubic_11_1.013_R.ttf',
  variable: '--font-cubic11',
});

export default function CustomApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <>
      <style jsx global>{`
        .body {
          font-family: ${notoSansTC.style.fontFamily};
        }

        .font-cubic11 {
          font-family: ${cubic11.style.fontFamily};
        }

        .font-chappa {
          font-family: ${chappaFont.style.fontFamily};
        }
      `}</style>
      <Head>
        <title>Welcome</title>
      </Head>
      <div
        className={`${chappaFont.variable} ${cubic11.variable} ${notoSansTC.className}`}
      >
        {getLayout(<Component {...pageProps} />)}
      </div>
    </>
  );
}

// End of code snippet

This code block includes the usage of Next docs and Next docs

Answer 10

// Start of code snippet

/********* including external libraries ****************/
import { Noto_Sans_TC } from '@next/font/google';
import CustomFont from '@next/font/local';
import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import type { ReactElement, ReactNode } from 'react';
import './styles.css';

// End of external libraries section

// Start of internal libraries section

export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const notoSansTC = Noto_Sans_TC({
  weight: ['300', '400', '700', '900'],
  subsets: ['chinese-traditional'],
  display: 'swap',
});

const chappaFont = CustomFont({
  src: '../public/fonts/chappa-Black.ttf',
  variable: '--font-chappa',
});
const cubic11 = CustomFont({
  src: '../public/fonts/Cubic_11_1.013_R.ttf',
  variable: '--font-cubic11',
});

export default function CustomApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <>
      <style jsx global>{`
        .body {
          font-family: ${notoSansTC.style.fontFamily};
        }

        .font-cubic11 {
          font-family: ${cubic11.style.fontFamily};
        }

        .font-chappa {
          font-family: ${chappaFont.style.fontFamily};
        }
      `}</style>
      <Head>
        <title>Welcome</title>
      </Head>
      <div
        className={`${chappaFont.variable} ${cubic11.variable} ${notoSansTC.className}`}
      >
        {getLayout(<Component {...pageProps} />)}
      </div>
    </>
  );
}

// End of code snippet

This code block includes the usage of Next docs and Next docs

The next/font feature functions perfectly in all areas except for a single specific component

New Experience with Next.js and Tailwind CSS

Exploring the next/font Package

A Minor Glitch in the System

An Illustrative Example

Key Code Snippets:

Valuable Insight

Answer №1

Answer №2

Answer №3

A Fresh Approach

...not without its flaws...

Optional Class Adding Function

Integrating Classes with the Body Element

What Lies Ahead?

Answer №4

Answer №5

Similar questions

I'm looking for guidance on utilizing the NodeRT (Windows.Gaming.Input) module within an electron environment. Can anyone provide some

What is the best way to extract information from a JSON object?

What is the correct way to utilize "data:" in a jQuery AJAX call?

Automating Internet Explorer using VBA to click a button

Verify the ng-if condition for a specific value and display an alternative option if the condition is not

Having trouble with your Javascript Ajax call?

How to Use CSS to Align an Image in a Header

What is the best method for enabling HTML tags when using the TinyMCE paste plugin?

bootstrap for building responsive websites

Webpack has successfully built the production version of your ReactJS application. Upon review, it appears that a minified version of the development build of React is being used

Reset input field when checkbox is deselected in React

How can we identify if the user is utilizing a text-input control?

How to eliminate all special characters from a text in Angular

Error: No targets with the name "taskname" were found for the custom Grunt task

Observe the present time in a specific nation

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

Caution: It is not possible to make changes to a component (`App`) during the rendering of another component (`History

Is it possible to retrieve the `arguments` objects if one of the parameters is named "arguments"?

Enhance the standard input control in Vue.js by extending it to include features such as

Preventing the "save" button from being enabled until a change has been made to at least one input field