feat: add option to use Geist Sans instead of Inter (#1821)

Co-authored-by: Ethan Zhou <[email protected]> Co-authored-by: juliusmarminge <[email protected]>
t3-oss · May 7, 2024 · 4de1927 · 4de1927
1 parent 0362924
commit 4de1927
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 82 deletions.
diff --git a/.changeset/curly-windows-learn.md b/.changeset/curly-windows-learn.md
@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+change default font from Inter to Geist Sans
diff --git a/cli/src/installers/index.ts b/cli/src/installers/index.ts
@@ -8,8 +8,8 @@ import { dbContainerInstaller } from "./dbContainer.js";
 import { drizzleInstaller } from "./drizzle.js";
 import { dynamicEslintInstaller } from "./eslint.js";
 
-// Turning this into a const allows the list to be iterated over for programatically creating prompt options
-// Should increase extensability in the future
+// Turning this into a const allows the list to be iterated over for programmatically creating prompt options
+// Should increase extensibility in the future
 export const availablePackages = [
   "nextAuth",
   "prisma",

diff --git a/cli/template/base/next.config.js b/cli/template/base/next.config.js
@@ -17,6 +17,7 @@ const config = {
     locales: ["en"],
     defaultLocale: "en",
   },
+  transpilePackages: ["geist"],
 };
 
 export default config;
diff --git a/cli/template/base/package.json b/cli/template/base/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@t3-oss/env-nextjs": "^0.10.1",
+    "geist": "^1.3.0",
     "next": "^14.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/cli/template/extras/config/tailwind.config.ts b/cli/template/extras/config/tailwind.config.ts
@@ -6,7 +6,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
+        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
       },
     },
   },

diff --git a/cli/template/extras/src/app/layout/base.tsx b/cli/template/extras/src/app/layout/base.tsx
@@ -1,10 +1,6 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-});
+import { GeistSans } from "geist/font/sans";
 
 export const metadata = {
   title: "Create T3 App",
@@ -19,7 +15,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={GeistSans.className}>{children}</body>
     </html>
   );
 }
diff --git a/cli/template/extras/src/app/layout/with-trpc-tw.tsx b/cli/template/extras/src/app/layout/with-trpc-tw.tsx
@@ -1,14 +1,9 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
 
 import { TRPCReactProvider } from "~/trpc/react";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 export const metadata = {
   title: "Create T3 App",
   description: "Generated by create-t3-app",
@@ -21,8 +16,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={`font-sans ${inter.variable}`}>
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>
         <TRPCReactProvider>{children}</TRPCReactProvider>
       </body>
     </html>

diff --git a/cli/template/extras/src/app/layout/with-trpc.tsx b/cli/template/extras/src/app/layout/with-trpc.tsx
@@ -1,13 +1,9 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
 
 import { TRPCReactProvider } from "~/trpc/react";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 export const metadata = {
   title: "Create T3 App",
   description: "Generated by create-t3-app",
@@ -21,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={GeistSans.className}>
         <TRPCReactProvider>{children}</TRPCReactProvider>
       </body>
     </html>

diff --git a/cli/template/extras/src/app/layout/with-tw.tsx b/cli/template/extras/src/app/layout/with-tw.tsx
@@ -1,11 +1,6 @@
 import "~/styles/globals.css";
 
-import { Inter } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
+import { GeistSans } from "geist/font/sans";
 
 export const metadata = {
   title: "Create T3 App",
@@ -19,8 +14,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={`font-sans ${inter.variable}`}>{children}</body>
+    <html lang="en" className={`${GeistSans.variable}`}>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/cli/template/extras/src/pages/_app/base.tsx b/cli/template/extras/src/pages/_app/base.tsx
@@ -1,15 +1,11 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/dist/shared/lib/utils";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={inter.className}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

diff --git a/cli/template/extras/src/pages/_app/with-auth-trpc-tw.tsx b/cli/template/extras/src/pages/_app/with-auth-trpc-tw.tsx
@@ -1,24 +1,19 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={`font-sans ${inter.variable}`}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

diff --git a/cli/template/extras/src/pages/_app/with-auth-trpc.tsx b/cli/template/extras/src/pages/_app/with-auth-trpc.tsx
@@ -1,23 +1,19 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={inter.className}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

diff --git a/cli/template/extras/src/pages/_app/with-auth-tw.tsx b/cli/template/extras/src/pages/_app/with-auth-tw.tsx
@@ -1,22 +1,17 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={`font-sans ${inter.variable}`}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

diff --git a/cli/template/extras/src/pages/_app/with-auth.tsx b/cli/template/extras/src/pages/_app/with-auth.tsx
@@ -1,21 +1,17 @@
+import { GeistSans } from "geist/font/sans";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType<{ session: Session | null }> = ({
   Component,
   pageProps: { session, ...pageProps },
 }) => {
   return (
     <SessionProvider session={session}>
-      <main className={inter.className}>
+      <main className={GeistSans.className}>
         <Component {...pageProps} />
       </main>
     </SessionProvider>

diff --git a/cli/template/extras/src/pages/_app/with-trpc-tw.tsx b/cli/template/extras/src/pages/_app/with-trpc-tw.tsx
@@ -1,17 +1,13 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={`font-sans ${inter.variable}`}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

diff --git a/cli/template/extras/src/pages/_app/with-trpc.tsx b/cli/template/extras/src/pages/_app/with-trpc.tsx
@@ -1,17 +1,13 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-});
-
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={inter.className}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );

diff --git a/cli/template/extras/src/pages/_app/with-tw.tsx b/cli/template/extras/src/pages/_app/with-tw.tsx
@@ -1,16 +1,11 @@
+import { GeistSans } from "geist/font/sans";
 import { type AppType } from "next/app";
-import { Inter } from "next/font/google";
 
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
-    <main className={`font-sans ${inter.variable}`}>
+    <main className={GeistSans.className}>
       <Component {...pageProps} />
     </main>
   );