next/font issue
Answered
Grass carp posted this in #help-forum
Grass carpOP
I'm facing an issue with next/font in my Next.js application. I'm getting this error when using the Inter font
Preload is enabled but no subsets were specified for fontI don't want to subset the font at all since I need full character support, but I also don't want to disable preloading as it might hurt performance. Is there a way to use next/font with the complete Inter font while keeping the preloading benefits?Inter. Please specify subsets or disable preloading if your intended subset can't be preloaded.
Available subsets:cyrillic,cyrillic-ext,greek,greek-ext,latin,latin-ext,vietnamese
14 Replies
@Yi Lon Ma just specify all subsets
Grass carpOP
Thank you, but it looks a bit silly...
Grass carpOP
BTW, how can I make sure next.js doesn't subset my fonts even if I specified all subsets?
nextjs includes all of the subsets you specify so if you specify all of them nextjs includes everything (this is rather a google fonts feature not nextjs feature)
but are you sure you want full character support? there arent many apps that need to support cyrillic-ext, greek-ext, latin-ext and vietnamese at the same time, and each additional subset loaded is a performance penalty
@joulev but are you sure you want full character support? there arent many apps that need to support cyrillic-ext, greek-ext, latin-ext and vietnamese at the same time, and each additional subset loaded is a performance penalty
Grass carpOP
Our project is a web IDE where users can input with Unicode characters, so I think loading all font sets is necessary.
@joulev but are you sure you want full character support? there arent many apps that need to support cyrillic-ext, greek-ext, latin-ext and vietnamese at the same time, and each additional subset loaded is a performance penalty
Grass carpOP
I found that [Fontsource](https://fontsource.org/) might be a better fit for my case. When using next/font, it downloads all the specified subsets upfront, however, with Fontsource, the font subsets are loaded on demand. Initially, it loads the Latin subset, and if I input Vietnamese characters, it dynamically downloads the Vietnamese subset. Iād appreciate your suggestions. š
@Grass carp I found that [Fontsource](https://fontsource.org/) might be a better fit for my case. When using next/font, it downloads all the specified subsets upfront, however, with Fontsource, the font subsets are loaded on demand. Initially, it loads the Latin subset, and if I input Vietnamese characters, it dynamically downloads the Vietnamese subset. Iād appreciate your suggestions. š
yes fontsource is good, that said
font subsets are loaded on demandthis sounds surreal. i doubt it is even possible, doubt fontsource can support such a feat
@joulev yes fontsource is good, that said
> font subsets are loaded on demand
this sounds surreal. i doubt it is even possible, doubt fontsource can support such a feat
Grass carpOP
this sounds surreal. i doubt it is even possible, doubt fontsource can support such a featI think so too, let me try it again š
@joulev yes fontsource is good, that said
> font subsets are loaded on demand
this sounds surreal. i doubt it is even possible, doubt fontsource can support such a feat
Grass carpOP
This is what I have observed. The JetBrains Mono font comes from Fontsource, but I'm not sure if I made a mistake somewhere.
https://fontsource.org/docs/getting-started/subsets
Note: We do not recommend using this method unless you have a specific reason to do so. The default CSS utilises the unicode-range property to only load the characters that are used on the page, which is more efficient than manually loading subsets.oh, I found the evident from their doc
@Grass carp This is what I have observed. The JetBrains Mono font comes from Fontsource, but I'm not sure if I made a mistake somewhere.
oh wow that's nice, then yeah it is good
@joulev oh wow that's nice, then yeah it is good
Grass carpOP
Yes, it's a good news for me, I really appreciate your help. š