Typography

The package includes a FontPicker React component and a small catalog of families: Inter, Geist, IBM Plex Sans, Segoe UI, JetBrains Mono, Geist Mono, IBM Plex Mono and system fallbacks.

import { FontPicker, DEFAULT_FONTS } from "nextguide/fonts"

export function TypographySettings() {
  return <FontPicker defaultValue={DEFAULT_FONTS} onChange={(fonts) => console.log(fonts)} />
}

The preview is interactive, but in Developer Mode the host application is responsible for saving font choices and applying them to its layout. Account Mode includes a browser-based setup wizard and Appearance settings with separate body, heading and code font selectors. The published npm alpha may lag behind the current source. NextGuide uses Next.js font loading. System fonts such as Segoe UI are never redistributed with NextGuide.

For a static site, use next/font/google to self-host open fonts and connect the chosen CSS variables to your theme.