Control where next/font font-face CSS gets injected

[hernansartorio]

Goals

I'm building a website builder (similar to the Platforms starter kit) that allows people to build websites and customize the fonts used on them.

My page editor renders a live preview within a controlled iframe, which includes its custom CSS. I would like to use next/font for fonts but I cannot given that the package injects the font-face CSS automatically on the head of the main document. I would be great to be able to control where the CSS gets injected instead so I can include it within the iframe.

Non-Goals

No response

Background

Currently the only alternative for my use case is not using next/font.

Proposal

Be able to control where the next/font CSS gets injected for any given next/font font.

[cramforce]

Hey, how do you render the iframe? Why doesn't it load the font? Generally speaking next/font relies on static analysis and may not be suitable for workloads where the font is selected in a dynamic fashion

[hernansartorio]

Hey, thanks for looking into this. I’m using react-frame-component, I’d need to be able to render the font-face CSS into a style tag or reference it with a <link />. Could there be any workaround?