The Font Manager is where you define the fonts used in your brand guide. It lets you create a clean, structured list of your brand’s typefaces, along with usage notes, alternatives, and external font links. These fonts can then be displayed inside your brand guide using the Font Gallery component.

This tool is perfect for designers, agencies, and teams who want to clearly communicate their typography system.

🌟 What You Can Do in the Font Manager

From this screen, you can:

• Add new fonts to your brand
• Edit or delete existing fonts
• Reorder fonts with drag‑and‑drop
• Add external font links (e.g., Google Fonts, Adobe Fonts)
• Edit or delete external links
• Save all font settings in one click

It’s a simple, organized way to manage your brand’s typography.

🧭 Page Overview

When you open the Font Manager, you’ll see two main sections:

1. Fonts

A list of all fonts you’ve added to your brand.
Each font appears as a collapsible card showing:

• Font name (e.g., “Headline”)
• Font title (e.g., “Tiempos Headline”)
• Usage (e.g., “H1–H3”)
• Alternatives
• Notes
• Theme role (headline, paragraph, special)

You can expand each card to view details.

2. External Font Links

A list of URLs that load your fonts — such as:

• Google Fonts links
• Adobe Fonts project URLs
• Custom CSS font imports

These links ensure your fonts load correctly in your brand guide.

➕ Adding a New Font

Click Add New Font to open the modal.

You can enter:

• Font Name — internal label (e.g., “Headline”)
• Font Title — the actual typeface name (e.g., “Inter Bold”)
• Usage — where this font is used
• Alternatives — fallback fonts
• Notes — licensing, spacing notes, etc.
• Theme Role — connects this font to your theme (headline, paragraph, special)

Once added, the font appears in your list and can be reordered or edited.

✏️ Editing a Font

Click the pencil icon on any font card to open the edit modal.

You can update any field, including the theme role.
Changes appear immediately in the list.

🗑 Deleting a Font

Click the trash icon to remove a font from your brand.

You’ll be asked to confirm before it’s deleted.

🔁 Reordering Fonts

Use the ⋮⋮ drag handle to reorder fonts.

This is especially useful when:

• You want to group fonts by category
• You want to control the display order in your brand guide
• You’re organizing a large font system

The order you set here is the order your Font Gallery component will use.

🌐 External Font Links

External links load your fonts into the brand guide.

Examples include:

• Google Fonts:
  https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap
• Adobe Fonts:
  https://use.typekit.net/xxxxxxx.css
• Custom CSS imports

Adding a Link

Click Add External Link, then enter:

• Link Name — e.g., “Google Fonts – Inter”
• URL — the full link

Editing a Link

Click the pencil icon next to any link.

Deleting a Link

Click the trash icon and confirm.

Reordering Links

Drag the ⋮⋮ handle to reorder them.

💾 Saving Your Font Settings

All changes — fonts and external links — are saved together.

Click Save Settings in the bottom‑right corner to apply your updates.

Your brand guide will now use the updated font list and external links.

🔐 Permissions

Only owners and editors can access the Font Manager.

View‑only users cannot modify fonts or links.

🎯 Summary

The Font Manager helps you:

• Document your brand’s typography
• Organize fonts with clear usage notes
• Connect fonts to your theme
• Load fonts via external links
• Keep everything clean and consistent

It’s a simple but powerful tool for maintaining a professional, well‑structured brand guide.