diff --git a/package-lock.json b/package-lock.json index 39e081321..cfd7776fa 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/ui/package.json b/packages/ui/package.json index edbf10697..cef662507 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/src/v2/theme.css b/packages/ui/src/v2/theme.css index cc27ffb95..25e8713ec 100644 --- a/packages/ui/src/v2/theme.css +++ b/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;