Product preview card component using variable fonts

Hello everyone 👋,

Here's my solution for product preview card component using variable fonts.

If the browser supports variable font features, it should set the optical size of the font using the opsz axis, e.g. font-variation-settings: "opsz" 72. This progressive enhancement is introduced by using the @supports query in the CSS.

The axis definitions for the Fraunces variable font can be found here.

One thing I've learnt was that if you want to play with the other axis of the variable font, make sure to include it in the font import 🤦😂 We can do this by adding the axis and range into the font import, e.g. family=Fraunces:opsz,wght,[email protected],100..900,0..100 and then we can use the axis via the font-variation settings, e.g. font-variation-settings: "opsz" 72, "wght" 126, "SOFT" 88;.

I'd appreciate it if you can provide feedback on my solution. Thanks and happy coding! 🙇‍♂️🙏