Font Gallery Component

The Font Gallery Component presents your brand's typography in a clean, organized gallery. Drawing directly from the fonts you've documented in the Font Manager, it helps designers, developers, and collaborators quickly understand your typography system and how each typeface should be used.

Use this component whenever you want to showcase the fonts that define your brand.

Common Uses

The Font Gallery Component is ideal for:

• Brand typography sections
• Primary and secondary typefaces
• Font hierarchy
• Design system documentation
• Brand guidelines
• Developer handoff

Because it displays information directly from your Font Manager, your typography documentation stays consistent throughout your guide.

Gallery Content

Customize the information displayed above your font gallery.

Title

Introduce the typography section with a descriptive heading.

Examples include:

• Typography
• Brand Fonts
• Type System

Subtitle

Provide additional guidance or explain how the typography should be used.

Examples include:

• Our primary brand typefaces
• Typography used throughout our visual identity

Category Label

Display a label above each font card to identify the role of the typeface.

Examples include:

• Headlines
• Body Text
• Display
• Accent

Category labels help organize your typography into a clear visual hierarchy.

Gallery Layout

Items Per Row

Choose how many font cards appear in each row.

Fewer cards create larger, more detailed previews, while additional columns provide a more compact overview of your typography system.

Select the layout that best complements your guide.

Font Information

Each card displays information pulled directly from the Font Manager.

Depending on the information you've documented, this may include:

• Font name
• Typeface
• Usage
• Fallback fonts
• Notes
• Theme role

Updates made in the Font Manager are automatically reflected in the gallery, helping keep your documentation accurate and consistent.

Color Options

Customize the appearance of the gallery using optional color settings.

Available options include:

• Title color
• Text color
• Category label color
• Background color

If no colors are selected, the component automatically inherits your brand's default theme styling.

Theme Integration

The Font Gallery Component works seamlessly with your brand theme.

You can:

• Select predefined theme colors
• Enter custom HEX values
• Leave fields blank to inherit your default styling

This ensures your typography documentation remains visually consistent with the rest of your brand guide.

Saving Your Changes

Click Save Component to apply your updates.

The live preview refreshes automatically, allowing you to review the finished gallery before returning to the Page Editor.

Tips

• Organize fonts by their intended role rather than alphabetically.
• Use clear titles and category labels to help readers understand your typography hierarchy.
• Keep your Font Manager up to date so the gallery always reflects the latest standards.
• Pair the Font Gallery Component with Paragraph Components to provide additional guidance, licensing information, or implementation notes.

Summary

The Font Gallery Component provides a clear, professional way to document your brand's typography.

By presenting the fonts you've defined in the Font Manager, it creates a single source of truth that helps everyone understand which typefaces to use, when to use them, and how they fit within your overall brand system.