diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
index 2e4e2b274..aef39ac04 100644
--- a/apps/www/app/layout.tsx
+++ b/apps/www/app/layout.tsx
@@ -11,6 +11,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
+  display: 'swap',
 })
 
 interface RootLayoutProps {
diff --git a/apps/www/components/fonts.tsx b/apps/www/components/fonts.tsx
index 38fe777d6..b7305c6ae 100644
--- a/apps/www/components/fonts.tsx
+++ b/apps/www/components/fonts.tsx
@@ -8,11 +8,13 @@ import {
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
+  display: 'swap',
 })
 
 const fontMono = FontMono({
   subsets: ["latin"],
   variable: "--font-mono",
+  display: 'swap',
 })
 
 export function Fonts() {
diff --git a/templates/next-template/pages/_app.tsx b/templates/next-template/pages/_app.tsx
index 934085fe9..9166e201e 100644
--- a/templates/next-template/pages/_app.tsx
+++ b/templates/next-template/pages/_app.tsx
@@ -7,6 +7,7 @@ import "@/styles/globals.css"
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
+  display: 'swap',
 })
 
 export default function App({ Component, pageProps }: AppProps) {