Font Manager

The Font Manager lets you browse and install fonts from the Fontsource library. Once installed, select your fonts in the Token Designer's Typography section and click Apply Theme to activate them.

Opening the Font Manager

Click the Type icon (T) in the header toolbar to open the Font Manager panel.

Browsing Fonts

The Font Manager provides access to the entire Fontsource library - over 1,500 open-source fonts.

Categories

Filter fonts by category using the sidebar:

Search

Use the search bar to find fonts by name. Popular fonts like Inter, Roboto, and Poppins appear first when not searching.

Variable Fonts

Check Variable fonts only to filter for fonts with variable font support. Variable fonts allow smooth weight and style transitions with a single file.

Selecting a Font

Click any font to select it. The right panel shows:

• Font name and category
• Variable font badge (if applicable)
• Version number
• Link to Fontsource for detailed documentation

Previewing Fonts

Preview Text

The preview area shows your selected font with customizable sample text:

• Size options - Small, Medium, or Large preview
• Custom text - Type your own preview text
• Full character set - See uppercase, lowercase, and numbers

The preview loads directly from Google Fonts CDN for accurate rendering.

Selecting Weights

Choose which font weights to install:

• 400 (Regular) and 700 (Bold) are selected by default
• Click any weight to toggle selection
• At least one weight must be selected

Common weight mappings:

Installing Fonts

When you click Add to Project, the Font Manager installs the @fontsource/{font-id} npm package into your project. This makes the font available for use but does not activate it yet.

Note: Installing a font triggers an Astro dev server restart (since package.json changes). The preview may briefly go blank while the server restarts -- this is normal.

Activating a Font

After installing a font, you need to select it in the Token Designer to actually use it.

1. Open the Token Designer (palette icon in the toolbar)
2. Expand the Typography section
3. Your installed fonts appear at the top of the dropdown under "Installed Fonts"
4. Select a font for:
   • Body Font (--font-sans) -- used for all body text
   • Heading Font (--font-heading) -- enable "Use different fonts for headings and code"
   • Code Font (--font-mono) -- used for code blocks
5. Click Apply Theme

When you apply the theme, two things happen automatically:

• Your theme.css is updated with the selected font variables
• The font import (e.g. import '@fontsource/inter';) is added inside the frontmatter of BaseLayout.astro

If you switch fonts later, the old import is removed and replaced with the new one.

Direct Usage in Components

You can reference fonts in your components using the Tailwind classes defined by your theme tokens:

<h1 class="font-heading text-4xl">Welcome</h1>
<p class="font-sans">Body text uses the sans font.</p>

Managing Installed Fonts

Viewing Installed Fonts

Fonts you've already installed show a green checkmark in the grid and an Installed badge in the details panel.

Uninstalling Fonts

To remove a font:

1. Select the installed font in the Font Manager
2. Click the Uninstall button
3. The npm package is removed from your project

If the font was active in your theme, open the Token Designer and select a different font, then click Apply Theme to update the import.

Best Practices

Performance

• Limit font families - Use 1-2 font families maximum
• Limit weights - Only install weights you actually use
• Use variable fonts - One file covers all weights smoothly

Typography Pairing

Common font pairings:

Variable Font Benefits

Variable fonts offer:

• Smaller file size - One file vs multiple weight files
• Smooth animations - Animate between any weight value
• Flexibility - Use any weight, not just predefined ones

Troubleshooting

Font Not Applying

If an installed font doesn't appear:

1. Make sure you selected the font in Token Designer and clicked Apply Theme
2. Check that the font import exists inside the frontmatter of BaseLayout.astro
3. Save and wait for hot reload
4. Check browser dev tools for CSS conflicts

Installation Failed

If installation fails:

1. Verify your Codespace is running
2. Check the WebSocket connection (green indicator)
3. Try refreshing the page
4. Check the terminal for npm errors

Next Steps

• Icon Manager - Add icons to your project
• Visual Editor - Style elements visually
• Component Library - Pre-built sections