Skip to Content

Enhanced Font Picker Demo

This demo showcases the enhanced font picker with complete Google Fonts data from react-fontpicker (1,785+ fonts), instant font previews, intelligent 4-variant loading, and font loading detection.

Font Loading Status

✨ Instant Font Previews

Font previews are displayed instantly using the actual react-fontpicker sprite system (1,785+ fonts). Pre-rendered SVG sprites provide instant previews without any network requests.

Sprite System: Pre-rendered SVG sprites • 1,785+ Google Fonts • Zero loading time • Smart preview text • CSS sprite positioning

Font Loading Options

Only 4 essential variants (regular, bold, italic, bold-italic) will be loaded for optimal performance.

Typography Settings

Customize your font choices and layout preferences

Font for headings and titles

Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features.

Font for body text and paragraphs

Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features.

Monospace font for code blocks

Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features.

Font Size
Line Height
Theme
Border Radius

Font Picker Features

  • Google Fonts integration with live preview
  • Font category filtering (sans-serif, serif, monospace)
  • Font weight variants support
  • HeroUI design system integration
  • Automatic theme adaptation (light/dark)
  • Responsive design for all screen sizes

HeroUI Integration

The font picker automatically integrates with HeroUI's design system:

  • Uses HeroUI's design tokens and CSS variables
  • Automatically adapts to light/dark themes
  • Matches HeroUI component styling patterns
  • Supports responsive design and accessibility