Demo, all content is generated
Question

fonts from the v0 preview don't show up after I copy the code to my project

Solved · 362 views · asked by tariq_builds · edited

the v0 preview uses a nice font (looks like Geist or Inter?) but in my Next project everything is Times New Roman / default serif. The code has className="font-sans" everywhere.

What I’ve tried

Added a Google Fonts link tag in the head of layout.tsx, didn't change anything.

Comment
Which Tailwind version? It matters for where font-sans is defined. aiko_n · edited

2 answers

Marked as helpful by the asker
aiko_n · edited

font-sans points at a CSS variable that v0 sets in its own layout.tsx, which you didn't copy. Add this to app/layout.tsx:

import { Geist } from "next/font/google";

const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={geist.variable}>
      <body className="font-sans antialiased">{children}</body>
    </html>
  );
}

and make sure Tailwind's fontFamily.sans uses var(--font-sans). Remove the Google Fonts <link>, next/font self-hosts the font which is faster.

Serif as fallback means font-sans resolves to nothing at all, so check the Tailwind config part too.

Comment
copied v0's layout.tsx properly and it's Geist now. Thank you tariq_builds · edited
ingrid_h · edited

If you prefer Inter it's the same pattern with Inter from next/font/google. The variable name just has to match what your Tailwind config uses.

Comment