How bad is moving html , head and body tag out of layout and into dynamic Page to add custom head tags

[osama1523]

Summary

I have a specific use case where I want to load specific fonts based on data returned from the DB in a dynamic page..
I know the documentation clearly says a layout with html and body tag must be present in any page .. and you should not add head tags manually .. however using what the documentation suggests (client side adding using ReactDOM.preload) cause the link tags to be added after the document has rendered and in my case I'm loading fonts which causes FOUT errors ..
also I couldn't find a way to dynamically load fonts using (next/fonts) ..
I tried my approach (violating the documentation suggestion) and it works ok.. I did lose the functionality of loading.tsx but i dont really need it because my pages are cached and rarely updated..
any help??

Additional information

Next.js 15 / App router

Example

No response

[Yasir-Rafique]

Hi! I totally get where you’re coming from.

Dynamically loading fonts in Next.js when the font info comes from your database can be tricky, especially with the restrictions around the layout and the tags.

You mentioned that you tried inserting the manually (outside the recommended way) and it works fine for you. Apart from losing the loading.tsx feature, If your pages are cached and rarely updated, and if you are not relying on loading.tsx, this is honestly a practical workaround. As long as your approach doesn’t break your SEO or user experience, it is perfectly reasonable for your specific use case.

Just document your approach in case your requirements change in the future or other developers join the project.

A couple of tips:

If your dynamic fonts are from a limited set, you could pre-import all the possible fonts using next/font and just toggle them with CSS classes. But this won't be ideal if the font set is large or truly dynamic.

For truly dynamic fonts that only become known at runtime, what you are doing now is the most reliable method until Next.js adds first-class support for this scenario ( which doesn't seems possible for now, haha).