[create-next-app]: add font antialiasing to templates (#67425)

stylessh · devjiwonchoi · web-flow · commit 13e501fc2311 · 2024-07-03T17:36:13.000Z
This PR adds font antialiasing to all the next.js templates (with css or tw). ### Before ![Screenshot 2024-07-03 at 10 27 02](https://github.com/vercel/next.js/assets/45767683/65778211-23bd-4d20-b1d1-a2f443f73d4d) ### After ![Screenshot 2024-07-03 at 10 26 38](https://github.com/vercel/next.js/assets/45767683/922188fd-4406-4d08-9b73-74c699d51913) Co-authored-by: Jiwon Choi <devjiwonchoi@gmail.com>
diff --git a/packages/create-next-app/templates/app-tw/js/app/layout.js b/packages/create-next-app/templates/app-tw/js/app/layout.js
@@ -20,7 +20,9 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
         {children}
       </body>
     </html>
diff --git a/packages/create-next-app/templates/app-tw/ts/app/layout.tsx b/packages/create-next-app/templates/app-tw/ts/app/layout.tsx
@@ -25,7 +25,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
         {children}
       </body>
     </html>
diff --git a/packages/create-next-app/templates/app/js/app/globals.css b/packages/create-next-app/templates/app/js/app/globals.css
@@ -20,6 +20,8 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
diff --git a/packages/create-next-app/templates/app/ts/app/globals.css b/packages/create-next-app/templates/app/ts/app/globals.css
@@ -20,6 +20,8 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
diff --git a/packages/create-next-app/templates/default-tw/js/pages/_document.js b/packages/create-next-app/templates/default-tw/js/pages/_document.js
@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="antialiased">
         <Main />
         <NextScript />
       </body>
diff --git a/packages/create-next-app/templates/default-tw/ts/pages/_document.tsx b/packages/create-next-app/templates/default-tw/ts/pages/_document.tsx
@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="antialiased">
         <Main />
         <NextScript />
       </body>
diff --git a/packages/create-next-app/templates/default/js/styles/globals.css b/packages/create-next-app/templates/default/js/styles/globals.css
@@ -20,6 +20,8 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
diff --git a/packages/create-next-app/templates/default/ts/styles/globals.css b/packages/create-next-app/templates/default/ts/styles/globals.css
@@ -20,6 +20,8 @@ body {
   color: var(--foreground);
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,8 @@ body {`
`20`	`20`	`color: var(--foreground);`
`21`	`21`	`background: var(--background);`
`22`	`22`	`font-family: Arial, Helvetica, sans-serif;`
	`23`	`+ -webkit-font-smoothing: antialiased;`
	`24`	`+ -moz-osx-font-smoothing: grayscale;`
`23`	`25`	`}`
`24`	`26`
`25`	`27`	`* {`