feat: display each font text with the corresponding font in theme settings

[Dinis-Esteves]

I am submitting a pull request where I have made changes to the source code to enhance the font selection dropdown menu on the website.

Now, each font name in the dropdown is displayed in its corresponding font style.

This update makes the font selection process more intuitive and user-friendly, as users can see a preview of each font without having to test them one by one.

Old Appearance:

New Appearance:

[diogotcorreia]

Thank you for this PR, I like the final result a lot.

However, it results in users having to load all of these fonts, which is very wasteful if you're just using the default one.

The Google fonts API seems to have an option to only request a subset of characters, which would help with this: https://developers.google.com/fonts/docs/getting_started#optimizing_your_font_requests

I don't think there is a solution for the open-dyslexic font however, which is a problem, but I could investigate.

Let me know if you need help with this (either by here or just DM me on Discord/somewhere else).

[diogotcorreia]

I have made a few changes to your PR:

• I've moved things from DropdownSelect and DropdownOption back to ThemeSettings, since the former two are generic and used for more things than just fonts;
• You don't need to url encode the display names of fonts, it is possible to use encodeURIComponent, so I've used that instead;
• I did my suggestion to add a loop with all available fonts instead of hardcoding them;
• I made it so that the fonts required for preview are only loaded when you open the theme sidebar.