Generate random font combinations via Google fonts with Vue.js

generate random font combinations (Google Fonts, Vue.js)

Presenting a small clever app, which generates random font combinations via Google Fonts and applies them to the given text. The fonts are based on the category of fonts the user has picked, one for the heading and one for the body text. You can pick one of the following combinations for both the Heading and the Body:

• Sans-serif
• Serif
• Display
• Handwriting
• Monospace

Other features included:

• Change the size of Heading and the Body*
• Toggle Background to dark theme and white

Also, a small panel in the sidebar is present in which you can see the randomly selected font for heading and body, and the code provided to import the fonts in your style files or include them via the link tag.

If you click on either of the selected fonts it will take you to the corresponding Google Fonts page. Don't forget you can change the view to inspect the code to see how things work.

This app was created and submitted by @knyttneve, and is available here.