Font Configuration

Font Selector

Choose and preview Google Fonts for your design system. Select fonts for headings, body text, display, and code.

Filter by Category

Font Roles

Assign fonts to different typography roles

Heading Font

DM Sans

Body Font

The quick brown fox jumps over the lazy dog.

Display Font

DISPLAY

Monospace Fontconst code = "example";

Popular Pairings

Click to apply pre-designed font combinations

Typography Preview

See how your font selections look in context

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Body Text

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

This is secondary text that might appear as a caption or helper text. It uses the same font family but with muted styling.

Display Text

HERO HEADLINE

Code

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

greet("World");

Component Preview

Preview fonts in common UI components

Card

Card Title

This is a card description showing how body text looks.

Card content with the selected body font applied.

Buttons

Form Elements

Email Address

Password

Badges

DefaultSecondaryOutline

Available Fonts (59)

Click any font to preview it as the heading font