How to Extract and Implement Fonts from Target Websites in the AI Website Cloner Template

To extract and implement fonts from target websites, identify the source typography from Google Fonts links or computed CSS, then configure them using next/font/google or next/font/local in src/app/layout.tsx with CSS variables for optimal performance.

The AI Website Cloner Template leverages Next.js 16 with the App Router to provide type-safe, zero-layout-shift font loading. When cloning a website, accurately capturing the original typography requires extracting font families, weights, and styles from the target, then implementing them through the next/font API to ensure pixel-perfect replication.

Identifying Fonts on Target Websites

Before implementing, you must extract the exact font specifications from the source site.

Open the target website in your browser and inspect the <head> section for <link> tags pointing to Google Fonts (e.g., https://fonts.googleapis.com/css2?family=Inter:wght@400;700). Alternatively, use developer tools to check the computed font-family property on key elements like body text, headings, and code blocks.

Record every font family, weight (400, 700, etc.), and style (normal, italic) in your design token extraction notes. The repository includes a typography checklist in docs/research/INSPECTION_GUIDE.md to standardize this process.

Implementing Google Fonts

For Google-hosted fonts, use the next/font/google loader to automatically optimize and self-host the files.

Configure the Font in Layout

Open src/app/layout.tsx and import the font family. Replace or augment the default Geist and Geist_Mono imports. For example, to add Inter with weights 400 and 700:

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

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["400", "700"],
});

Apply CSS Variables

Attach the font variable to the <html> element alongside existing variables:

<html
  lang="en"
  className={`${inter.variable} ${geistSans.variable} ${geistMono.variable} h-full antialiased`}
>
  <body className="min-h-full flex flex-col">{children}</body>
</html>

Update Global CSS

Reference the variable in src/app/globals.css to create a fallback chain:

:root {
  --font-sans: var(--font-inter), "Geist", ui-sans-serif, system-ui, sans-serif;
}

Implementing Self-Hosted Fonts

When the target website uses custom font files (WOFF2, TTF, OTF), you must serve them locally.

Place Font Files

Download the font files and place them in the public/fonts/ directory. The repository expects self-hosted assets in this location for proper routing.

Configure Local Font Loader

Import localFont from next/font/local and define the source paths:

import localFont from "next/font/local";

const myFont = localFont({
  src: [
    { path: "/fonts/MyFont-Regular.woff2", weight: "400", style: "normal" },
    { path: "/fonts/MyFont-Bold.woff2", weight: "700", style: "normal" },
  ],
  variable: "--font-myfont",
});

Integrate into Layout

Apply the variable to the HTML element in src/app/layout.tsx:

<html
  lang="en"
  className={`${myFont.variable} h-full antialiased`}
>
  <body className="min-h-full flex flex-col">{children}</body>
</html>

Verification and Documentation

After implementation, run npm run dev and inspect the computed styles in your browser’s developer tools. Confirm that the expected font-family appears on text elements and that no layout shift occurs during loading.

Document your changes in docs/research/DESIGN_TOKENS.md by adding the font details and noting the modifications to src/app/layout.tsx. This ensures the typography extraction knowledge persists for future contributors working on the template.

Summary

• Identify font families and weights by inspecting the target website's CSS and <link> tags.
• Use next/font/google for Google Fonts with automatic optimization and subsetting.
• Use next/font/local for custom font files placed in public/fonts/.
• Define CSS variables (e.g., --font-inter) in src/app/layout.tsx and apply them to the <html> element.
• Reference font variables in src/app/globals.css for consistent fallback chains.
• Document all typography changes in docs/research/DESIGN_TOKENS.md to maintain design system integrity.

Frequently Asked Questions

How do I identify which fonts a target website uses?

Inspect the target page's <head> section for Google Fonts <link> tags, or check the computed font-family property in browser developer tools. Record each family name, weight, and style in the typography checklist provided in docs/research/INSPECTION_GUIDE.md.

Can I use multiple font families in the same project?

Yes. Import multiple fonts in src/app/layout.tsx and include their variables in the <html> className. For example: className={${inter.variable} ${geistMono.variable}}. Reference each variable in your CSS for specific elements like headings or body text.

Where should I place self-hosted font files?

Place WOFF2, TTF, or OTF files in the public/fonts/ directory. Reference them in the src array of next/font/local using absolute paths like /fonts/MyFont-Regular.woff2.

How does next/font improve performance compared to standard CSS imports?

The next/font API automatically optimizes fonts by inlining CSS, removing external network requests to Google Fonts, and preventing layout shift through proper font-display settings. Fonts are self-hosted at build time, eliminating round-trips to third-party servers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}