My company is operating a multi-tenant application where each tenant has their own sets of fonts. We are using a turbo monorepo with nextjs app router. I’ve made many attempts at different configurations to try and get the browser to only download selective fonts based on fonts configured in each tenants theme but no matter what I do I am either getting a regression in FCP or introducing FOUT resulting in this pyramid:
I was able to get it to only download the fonts for a specific client by separating each next/font import to its own module via:
export const ROBOTO = Roboto({ subsets: ["latin"] });
Then I would selectively do await import on that module in a switch based on whether its used in the tenants theme. This triggered the browser to only download the fonts I need but introduced additional latency where I have to choose between blocking rendering (FCP regression) or rendering with default fonts (FOUT).
The request to lookup the tenants theme can be made during SSR. Every attempt I made to move the next/font handling server-side triggered all fonts to download. I think this is due to Webpack static analysis but I’m not sure.
This problem is not unique to my org, it is the same exact issue described here: Dynamically Loading Fonts in a Multi-Tenancy Web Page Editor Without Increasing Bundle Size
I attempted to perform the solution described in that thread but it still triggered all of the fonts to download on the client.
This seems to be a very common problem. I’m wondering if there is any plan to better support multi-tenancy. Currently every time we add a new tenant, performance degrades for all tenants (not scalable).
Other related issue: