Next.js font example - v0 by Vercel

I'll create a Next.js page that demonstrates 4 different Google Fonts, each with 2 variants, using the Next.js font system 1.

This example demonstrates the Next.js font system with 4 different Google Fonts, each showcasing 2 variants 12:

Fonts Used:

Inter - Regular (400) and Bold (700) weights
Playfair Display - Normal and Italic styles
Fira Code - Regular (400) and Medium (500) weights
Poppins - Light (300) and Semibold (600) weights

Key Features:

Font Optimization: All fonts are automatically optimized and self-hosted 1
CSS Variables: Using the variable option for flexible styling 2
Multiple Weights/Styles: Each font demonstrates different variants 2
Performance: Zero layout shift with automatic font optimization 1
No External Requests: Fonts are served from your domain, not Google 1

The page showcases each font in dedicated cards and then combines them in a realistic layout example, demonstrating how different fonts can work together effectively in a real application.

I'll create a Next.js page that demonstrates 4 different Google Fonts, each with 2 variants, using the Next.js font system 1.

This example demonstrates the Next.js font system with 4 different Google Fonts, each showcasing 2 variants 12:

Fonts Used:

Inter - Regular (400) and Bold (700) weights
Playfair Display - Normal and Italic styles
Fira Code - Regular (400) and Medium (500) weights
Poppins - Light (300) and Semibold (600) weights

Key Features:

Font Optimization: All fonts are automatically optimized and self-hosted 1
CSS Variables: Using the variable option for flexible styling 2
Multiple Weights/Styles: Each font demonstrates different variants 2
Performance: Zero layout shift with automatic font optimization 1
No External Requests: Fonts are served from your domain, not Google 1

The page showcases each font in dedicated cards and then combines them in a realistic layout example, demonstrating how different fonts can work together effectively in a real application.