small updates in functionality and readme

README.md

@@ -7,3 +7,12 @@ A CSS playground for F-mods (font metric overrides). This tool will help you fin
 ![WTF demo](/public/demo.gif)
 
 The tool was inspired by [this article](https://developer.chrome.com/blog/font-fallbacks/) on improved font fallbacks.
+
+## Features
+
+- Works with all Google Fonts
+- Customize font parameters (size, weight, letter spacing etc.)
+- Apply F-mods and see them reflected immediately in the preview area
+- Preview crossfader, to "mix" the fallback font and the webfont in the preview area
+- Customizable preview text
+- CSS snippets ready for copy/paste

src/app/components/Interface.tsx

@@ -493,12 +493,13 @@ export const Interface = (props: InterfaceProps) => {
 
           <textarea
             className="text-slate-600 bg-slate-50 w-full mt-8 resize-none outline-none cursor-pointer"
-            rows={8}
+            rows={9}
             data-copy-box="left"
             onClick={(e) => manageCodeCLick(e)}
             readOnly={true}
             value={`@font-face {
   font-family: "fallback for ${fontName}";
+  font-weight: ${fontWeight};
   src: local(${fallbackFontName});
   size-adjust: ${sizeAdjust}%;
   ascent-override: ${ascentOverride}%;
@@ -518,7 +519,7 @@ export const Interface = (props: InterfaceProps) => {
 
           <textarea
             className="text-slate-600 bg-slate-50 w-full mt-8 resize-none outline-none cursor-pointer"
-            rows={8}
+            rows={9}
             data-copy-box="right"
             onClick={(e) => manageCodeCLick(e)}
             readOnly={true}