Website Redesign

[ayuhito]

Website Redesign

This is an open request to any designers who may be interested in helping with this issue through the creation of design mockups, especially since while I can help with the implementation, my UI/UX design skills are sub-par. If you'd like to help, please let us know!

The current website is due for a proper redesign as new features and capabilities have been added without much consideration for the UI leading to a bloated cluttered experience. The requirements for the project have since increased in scope as Fontsource aims to be more of a "hub" for all things font-related.

The website has two primary sections to consider, the documentation and font directory:

Documentation

I'm a big fan of Vercel (which imo is a cleaner rendition of Next.js) and Chakra UI's documentation. The current Fontsource documentation is similar in layout, but could definitely get a little touch up in design and organisation. e.g. using accordions or sectioning off entirely different things like docs, guides and integrations

Other ideas to consider:

• i18n support (I could help out with the Japanese docs)
• DocSearch implementation (I'm not sure if it's necessary since there isn't that much documentation in the first place)
• Possibly extending the max-width of the container for better readability?
• Changelog

Other references:

• Vitepress + Vitest

Directory

Google Fonts and Adobe Fonts are probably the two main players for a modern font directory, although I'm not really looking to compete with them in the first place since there is no real need to. However, it is still a fact that people use our directory and thus it is better for us to overhaul this section to a comparable standard.

Search and Directory Preview

Moving over to the more common approach where all fonts are previewable on the main page will allow fonts to be more easily discoverable and comparable. This does remove the need for the sidebar.

I think search doesn't need any technical changes, but it may be better to move away from the search modal for the main page to better accommodate adding previews on the main page. However, I still think we should keep the modal whenever the user uses CTRL+K anywhere on the site (maybe use kbar or cmdk). Similar to GitHub's new command pallete feature (which is under the feature preview tab currently).

• Preview Fonts More Easily #493

Additional ideas:

• Global text preview state - in other words, changing the preview text on one page carries over across the entire website
• Random button - fun little gimmick to randomly select a font

Font Preview

The layout can completely be redone, especially as there is more room without the sidebar. I'm not too sure what is the ideal format, but I do know we need the following elements:

• Preview functionality with selection of variables
• General information on the font where information can be scraped from Import Google Metadata.pb files #351
• NPM installation guide (although maybe that should be on a separate tab like font download below)
• Clipboard support for installation instructions
• Links to NPM, GitHub, Source and Licenses.

Ideas to experiment with:

• Variable font preview compatibility - add support to modify variable axis' to preview
• Show language support on website #293
• Possibly link to jsDelivr CDN? It's interesting to see that the jsDelivr CDN variant of a Google Font is used quite a bit (7M hits/mo for Roboto).

Font Download

This is on the same page as each individual font preview.

google-fonts-webhelper is a great project but has decayed from lack of maintenance. The Fontsource API can easily be extended to support downloading custom packages for users to directly self-host the files themselves.

Similar to the above implementation, we can let users modify variables and generate the appropriate CSS for them to use, with a direct download to the font files themselves. I think this important to allow this service to be accessible to configurations that do not support NPM or bundlers.

Other websites:

• https://www.1001freefonts.com/
• https://www.dafont.com/
• https://www.fontsquirrel.com/

Maybe to help fit this on each font family preview page, we should use tabs?

• Download files directly on website #244

Of course, feel free to suggest any ideas or improvements if you think so! These are just a bunch of things I brainstormed in the span of an hour, so this probably doesn't cover everything. Once again, I'd love to hear from anyone who would be interested in helping out with the design process for this issue!

[jwr1]

Also, under the Font Preview, a Flutter tab for an install guide and available parameters.

[tknw-gateway]

I am not a designer by profession, but I would like to contribute to this project.

May I redevelop the website from scratch?

Here is my plan.

• Vite + SolidJS + Windi CSS
• List fonts like Google Fonts on the root page
• Move the search box to the header so that it can be searched at any time
• Add random button to header
• Move the ad banner somewhere else
• Search using fuzzy finder without Algoria
• Maybe SSR

I am also a Japanese speaker, so I can help translate the documentation.

[ayuhito]

Hey @Denden4096, whilst I'm open to new frameworks for the website redesign, I think we'd still want to stick with React/Preact rather than SolidJS due to:

• Current maintainers unfamiliar with SolidJS making it more difficult to work on short term. It's also not as familiar for future contributors to also then get into
• Weaker ecosystem means more work needed get things working (MDX? Algolia? The little React deps we have?). Lots more DIY which is just more maintenance to work with in the future.

I'd love to learn and work with SolidJS in my personal projects, but it's not ideal for projects that's needs a lot of collaboration for imo.

Just the other day jsDelivr offered to get their designer to try drafting up some mockups for us, so I'd like to wait for them before committing to anything else. I still do appreciate the offer and maybe we can still work together later on though!

[tknw-gateway]

Thanks @ayuhito, I would like to forgo working on the renewal of the Fontsouce's website for now. But I may continue to work with the Fontsouce project in the future.

Anyway, I can't wait to see how the Fontsouce's website turns out in the future!

[ayuhito]

We've started mocking up designs and they're coming along nicely. I'll post the designs in this issue when they're completely finished, but if you're interested in progress pics, you can join our Discord.

We've also decided on going with a Remix + CF Workers website and use Radix UI + Stitches for our component library. Main reason for switching from Next.js to Remix is the nicer SSR + first-class MDX support which would be a lot more flexible and performant than our current setup. Lots more to come soon!

Feel free to involve yourself if you're interested in helping!

[ayuhito]

Closing in favour of #558.