feat(core): add styles/fonts subpath export with fontsource

IzumiSy · IzumiSy · commit 67ed77767042 · 2026-06-05T15:06:41.000+09:00
- Add @fontsource-variable/geist and @fontsource-variable/inter as deps
- Add ./styles/fonts export in package.json pointing to dist/fonts.css
- Create src/assets/fonts.css importing fontsource packages
- Update globals.css font-axis comment to reference new subpath
- Update examples to import @tailor-platform/app-shell/styles/fonts
- Remove next/font/google usage in Next.js example in favor of fontsource
diff --git a/examples/nextjs-app/src/app/globals.css b/examples/nextjs-app/src/app/globals.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "@tailor-platform/app-shell/styles";
+@import "@tailor-platform/app-shell/styles/fonts";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/examples/nextjs-app/src/app/layout.tsx b/examples/nextjs-app/src/app/layout.tsx
@@ -1,18 +1,8 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "@tailor-platform/app-shell/styles";
+import "@tailor-platform/app-shell/styles/fonts";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -25,7 +15,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body className="antialiased">{children}</body>
     </html>
   );
 }
diff --git a/examples/vite-app/src/index.css b/examples/vite-app/src/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@tailor-platform/app-shell/styles";
+@import "@tailor-platform/app-shell/styles/fonts";
 
 html,
 body {
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -28,6 +28,7 @@
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
+    "./styles/fonts": "./dist/fonts.css",
     "./theme.css": "./dist/theme.css",
     ".": {
       "types": "./dist/app-shell.d.ts",
@@ -50,6 +51,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@fontsource-variable/geist": "^5.0.0",
+    "@fontsource-variable/inter": "^5.0.0",
     "@standard-schema/spec": "^1.1.0",
     "@tailor-platform/app-shell-vite-plugin": "workspace:*",
     "@tailor-platform/auth-public-client": "^0.5.0",
diff --git a/packages/core/src/assets/fonts.css b/packages/core/src/assets/fonts.css
@@ -0,0 +1,13 @@
+/*
+ * Self-hosted variable fonts used by AppShell's appearance axis. Shipped as a
+ * separate, opt-in stylesheet via the `@tailor-platform/app-shell/styles/fonts`
+ * subpath so the default `@import "@tailor-platform/app-shell/styles"` stays
+ * font-free and consumers can choose their own loading strategy (e.g.
+ * `next/font/local`, `next/font/google`, or a CDN).
+ *
+ * Family names: `"Geist Variable"`, `"Inter Variable"`. AppShell's
+ * `globals.css` falls back to `"Geist Sans"` / `"Inter"` after these so
+ * consumers who self-host with the conventional family names also work.
+ */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/inter";
diff --git a/packages/core/src/globals.css b/packages/core/src/globals.css
@@ -39,7 +39,7 @@
    * Font axis — applied independently of color theme via `data-font` on `<html>`.
    *
    * Family-name chain prefers the variable build (loaded by
-   * `@tailor-platform/app-shell/fonts`), then the conventional static family
+   * `@tailor-platform/app-shell/styles/fonts`), then the conventional static family
    * name (`Geist Sans` / `Inter` — what `next/font/google` and most CDNs
    * register), then the system stack. Consumers who load their own font under
    * either name automatically participate; no font loads when nothing matches.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	* Font axis — applied independently of color theme via `data-font` on `<html>`.
`40`	`40`	`*`
`41`	`41`	`* Family-name chain prefers the variable build (loaded by`
`42`		- * `@tailor-platform/app-shell/fonts`), then the conventional static family
	`42`	+ * `@tailor-platform/app-shell/styles/fonts`), then the conventional static family
`43`	`43`	* name (`Geist Sans` / `Inter` — what `next/font/google` and most CDNs
`44`	`44`	`* register), then the system stack. Consumers who load their own font under`
`45`	`45`	`* either name automatically participate; no font loads when nothing matches.`