Load Inter via Fontsource and set mono stack

Self-host the Inter variable font through @fontsource-variable/inter
rather than a CDN, so the v2 type scale renders in Inter with no
third-party request. Import it from the theme and point --font-sans
at the "Inter Variable" family the package registers.

Add --font-mono as a Radix-style system stack: the design specifies
Menlo, an Apple system font that cannot be self-hosted, so it falls
back per OS (Consolas, Liberation Mono, Monaco, monospace).

Signed-off-by: Émile Ré <emile@probo.com>

package-lock.json

@@ -2113,6 +2113,15 @@
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
@@ -22271,6 +22280,7 @@
       "dependencies": {
         "@ariakit/react": "^0.4.17",
         "@floating-ui/react": "^0.27.19",
+        "@fontsource-variable/inter": "^5.2.8",
         "@phosphor-icons/react": "^2.1.10",
         "@probo/helpers": "1.0.0",
         "@probo/i18n": "1.0.0",

packages/ui/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@ariakit/react": "^0.4.17",
     "@floating-ui/react": "^0.27.19",
+    "@fontsource-variable/inter": "^5.2.8",
     "@phosphor-icons/react": "^2.1.10",
     "@probo/helpers": "1.0.0",
     "@probo/i18n": "1.0.0",

packages/ui/src/v2/theme.css

@@ -53,6 +53,9 @@
  * These define --sand-1 … --sand-12, --gold-1 … etc. as raw CSS variables.
  * P3 wide-gamut overrides are included via @supports in each file.
  * ------------------------------------------------------------------------- */
+/* Inter — self-hosted variable font (family name: "Inter Variable") */
+@import "@fontsource-variable/inter/index.css";
+
 @import "@radix-ui/colors/sand.css";
 @import "@radix-ui/colors/sand-dark.css";
 @import "@radix-ui/colors/gold.css";
@@ -209,7 +212,11 @@
  * build is the Radix one, the same way --color-* is wiped above.
  * ------------------------------------------------------------------------- */
 @theme {
-    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+    --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+
+    /* Code/mono — Radix-style system stack. The design specifies Menlo, an
+     * Apple system font that is not self-hostable, so fall back per OS. */
+    --font-mono: "Menlo", "Consolas", "Liberation Mono", "Monaco", monospace;
 
     --text-*: initial;