best way to implement a font picker
I would like to allow my users to select a font using a google docs / microsoft word-like dropdown. Ideally I would like users to be able to see the font in the dropdown menu options itself. I would then like to be able to use that font in other places in my app.
Things I've looked into:
- I have found a few packages like https://github.com/samuelmeuli/font-picker-react but they dont seem to be maintained anymore and their API doesn't really fit with my use case. This project requires me to put an
apply-font class on a div to use that font for all its children while rendering the dropdown. I would like to be able to use this font without the dropdown after the user has selected and saved their choice.
- Looking at the new nextjs 13 font api, im not sure this will work. This seems like its meant to allow nextjs to statically compile the font into the app, but this seems unreasonable if I'm going to allow a user to select any font.
Does anyone have any idea how i might do this? As a side question, how does selecting a proper font weight typically work? Thanks for any help.GitHub
GitHub - samuelmeuli/font-picker-react: ✏️ Font selector component ...
✏️ Font selector component for Google Fonts. Contribute to samuelmeuli/font-picker-react development by creating an account on GitHub.
1 Reply
i can't edit the original post, but it would be awesome if the dropdown automatically included everything available in google fonts