Loading different fonts for different themes
Unanswered
Gouty oak gall posted this in #help-forum
Gouty oak gallOP
I have a
In my case the theme must be determined by the domain the site is accessed from (e.g. theme1.com uses theme1, theme2.com uses theme2 and so on). I have a utility function which uses
The issue is that
Is this problem unsolvable with next/font + SSG, or am I thinking about this the wrong way?
<ThemeProvider> component which has a prop theme, which can use one of many predetermined values. Each theme needs their own set of fonts, and it seems next/font/local is the official way of loading web fonts. However, after several attempts I've found no way of structuring the code so that only the required fonts would be loaded for each theme.In my case the theme must be determined by the domain the site is accessed from (e.g. theme1.com uses theme1, theme2.com uses theme2 and so on). I have a utility function which uses
next/headers to get the current theme.The issue is that
localFont may only be called at const level, so when I want to define a list of possible fonts to load, Next will load them all for every theme. This of course is unacceptable for bandwidth reasons. Any custom solutions I can think of would cause the font loading to be delayed, leading to FOUT.Is this problem unsolvable with next/font + SSG, or am I thinking about this the wrong way?
5 Replies
Gouty oak gallOP
Found some ideas in this issue, but none of them really fix every problem https://github.com/vercel/next.js/discussions/40345
Seems like we have to choose between loading all the fonts fast or causing FOUT and CLS.
Of course there's also the third option of making separate builds for every theme and using environment variables to define the themes and their fonts, which doesn't sound great either...
Seems like we have to choose between loading all the fonts fast or causing FOUT and CLS.
Of course there's also the third option of making separate builds for every theme and using environment variables to define the themes and their fonts, which doesn't sound great either...
Pyramid ant
Hi @Gouty oak gall
I have an issue with this Platform Starter Kit on deployment i get 404 error but deployment to production in vercel was successful, did you face this error and how do you think it can be resolved?
I have an issue with this Platform Starter Kit on deployment i get 404 error but deployment to production in vercel was successful, did you face this error and how do you think it can be resolved?
Gouty oak gallOP
@Pyramid ant sounds like your problem is not related to font loading? If so, I'd recommend searching for a thread with the same or similar problem, or creating your own if such a thread does not seem to exist yet.
Unfortunately I have no idea about issues regarding Platform Starter Kit. But if you make a thread and post some more details, perhaps it can be figured out
I see you've already done that :) Here's the link, if anyone needs it: https://nextjs-forum.com/post/1218074948325871667