Font picker with all google fonts in App Router
Unanswered
Reddish carpenter ant posted this in #help-forum
Reddish carpenter antOP
Hi,
I'm looking to build a component that will allow users to choose a font from a dropdown and then use that on another page. I'm curious what the best way to go about this in Next.js, though, since it seems like Next provides a good amount of font optimization out of the box and I'd like to use that.
Specifically, I'm looking for
a) a way to list all fonts from next/font/google to populate the font dropdown for the user
b) a way to dynamically import just a user's desired font on another page
For (a), I know I could specify imports, but that seems a little verbose when trying to allow users to select from a large number of fonts.
We'll be storing a user's selected in our font in our db, so for (b) it'll need to depend on the name of the font that the user selected.
Does anyone have any experience with this?
I'm looking to build a component that will allow users to choose a font from a dropdown and then use that on another page. I'm curious what the best way to go about this in Next.js, though, since it seems like Next provides a good amount of font optimization out of the box and I'd like to use that.
Specifically, I'm looking for
a) a way to list all fonts from next/font/google to populate the font dropdown for the user
b) a way to dynamically import just a user's desired font on another page
For (a), I know I could specify imports, but that seems a little verbose when trying to allow users to select from a large number of fonts.
We'll be storing a user's selected in our font in our db, so for (b) it'll need to depend on the name of the font that the user selected.
Does anyone have any experience with this?
10 Replies
@Reddish carpenter ant Hi,
I'm looking to build a component that will allow users to choose a font from a dropdown and then use that on another page. I'm curious what the best way to go about this in Next.js, though, since it seems like Next provides a good amount of font optimization out of the box and I'd like to use that.
Specifically, I'm looking for
a) a way to list all fonts from next/font/google to populate the font dropdown for the user
b) a way to dynamically import just a user's desired font on another page
For (a), I know I could specify imports, but that seems a little verbose when trying to allow users to select from a large number of fonts.
We'll be storing a user's selected in our font in our db, so for (b) it'll need to depend on the name of the font that the user selected.
Does anyone have any experience with this?
I face this problem at work and I found it not possible to integrate next/font with this. In other words, you are completely on your own.
* List of fonts can be retrieved with the Google Fonts API. You can pregenerate this list during build time to a json file.
* Displaying the font in the drop-down (if you want to do that): you need to generate font subsets to reduce file sizes.
* Using the font in the page from the font name stored in the database requires you to manually add the <link> tag (same way you would use Google Fonts in a raw html project).
* List of fonts can be retrieved with the Google Fonts API. You can pregenerate this list during build time to a json file.
* Displaying the font in the drop-down (if you want to do that): you need to generate font subsets to reduce file sizes.
* Using the font in the page from the font name stored in the database requires you to manually add the <link> tag (same way you would use Google Fonts in a raw html project).
An example of the first two items can be found here https://github.com/joulev/google-fonts-preview-subsets
Reddish carpenter antOP
Thanks for the heads up! Taking a look at your gh project, looks like a good starting point
Seems like your project loads a super large amount of fonts, have you found a good way to get a subset of the total fonts available?
@Reddish carpenter ant Seems like your project loads a super large amount of fonts, have you found a good way to get a subset of the total fonts available?
That one already loads the bare minimum amount: only load the glyphs required to render the font name and only load the font when it enters the view. It’s impossible to go any lower. If you load the normal font files, it could easily cost gigabytes every page load.
So yeah, unless it’s a hard requirement, I don’t recommend rendering the font names using the fonts themselves. Just use your UI font.
Reddish carpenter antOP
Hm sorry didn't specify, it does seem that it loads the glyphs as needed so it's optimized well, but I'm moreso talking 'top 50 most popular fonts' vs. the hundreds available in the component now — I suppose that's more of a google fonts API question though
Oh, for that one then yeah, simply change the API call as needed. I don’t remember which search query is needed to sort by popularity though.
Google does provide a short but good documentation for the API, check it out
Reddish carpenter antOP
Cool, thanks for the help.
If anyone else stumbles across this, there are a couple of other packages available on npm that provide font picker components, albeit not with nextjs optimization
If anyone else stumbles across this, there are a couple of other packages available on npm that provide font picker components, albeit not with nextjs optimization