Add fallback family to the code sample

[pepelsbey]

Otherwise the default Times New Roman serif font will be used before the Open Sans loads.

Generic fallback font family is considered as a good practice. It usually make font switch less obvious for users, so it’s good to have it in the code sample as a reminder.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/fontsource/fontsource/E7V8FiPU8Xk7sXi4YSpSFmww3G63
✅ Preview: https://fontsource-git-fork-pepelsbey-patch-1-fontsource.vercel.app

[ayuhito]

Great idea. I think we can go one step further with this PR and implement it to font previews documentation too.

There is metadata per font preview that shows whether it is sans-serif, serif or monospace, so it'll be fairly easy to automatically show the correct one on the preview.

Would you be interested in giving that a go?

[pepelsbey]

Yes, that makes sense. I'll look into that!

[pepelsbey]

Well, the problem is the there are around 1345 fonts that needs to be specified as:

font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;

Unfortunately it’s a manual and quite time-consuming process. It’s possible to gather such data from Google Fonts

• serif https://fonts.google.com/?category=Serif
• sans-serif https://fonts.google.com/?category=Sans+Serif
• cursive https://fonts.google.com/?category=Handwriting
• monospace https://fonts.google.com/?category=Monospace

But I’m not sure if I’m ready to automate it myself.

[ayuhito]

My bad, I feel I should add more documentation regarding the internal workings of the website when I get the chance. I've been besieged with so much work recently to keep track with this project though.

FontPreview.tsx is passed a metadata object in its parameters. This metadata looks like this. It's only a matter of reading metadata.category and change the documentation accordingly.

Note the categories Fontsource metadata give is the following:

• sans-serif
• serif
• display (maps to cursive according to Google Fonts)
• handwriting (maps to cursive)
• monospace
• other (should map to nothing)

You can go to the Fontsource font preview search and filter by those categories for reference.

[ayuhito]

@pepelsbey, just checking in if you're still interested in this PR or someone else should jump in to take care of it?

[pepelsbey]

@DecliningLotus sorry, I’ll give a go on weekend and if nothing comes out of it, I’ll let you know.

[ayuhito]

No pressure at all! I was just checking in!

[ayuhito]

I'll merge this PR and post a new issue (#410) to see if anyone else is interested in undertaking this idea. Thank you for your initial contribution though!