search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

Fonts are not rendered correctly inside Dialog content when using nextjs13 + nextjs font #2070

Closed StErMi closed 1 year ago

StErMi commented 1 year ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.4

What browser are you using?

Chrome

Reproduction URL

https://github.com/StErMi/nextjs13-font-bug-headlessui-dialog

Describe your issue

With the new nextjs13 + nextjs font optimization, I'm having issue rendering the font inside the dialog that render itself outside the <main> element defined in _app.tsx

Which should be the correct way to handle this problem?

RobinMalfait commented 1 year ago

Hey! Thank you for your bug report! Much appreciated! 🙏

For accessibility reasons the Dialog is currently rendered as the last child of the <body> so that we can guarantee that it sits on top of everything so that you can't accidentally interact with anything below the Dialog.

We currently also don't have a way to support moving it.

However, I think the easier solution would be to make the font available across the full site and not just the main tag. The Next.js docs has some more information about that here: https://nextjs.org/docs/basic-features/font-optimization#apply-the-font-in-head

Hope this helps!