Font Manager

The Font Manager lets you browse and install fonts from the Fontsource library. Once installed, select your fonts in Site Style › Typography and click Apply Theme to use them on your site.

Opening the Font Manager

Open Site ▾ › Font Manager (in the Design column), or press ⌘K (Ctrl+K) and type "Font Manager".

You can also add fonts without leaving Site Style: Typography › Browse all opens the same catalog, with Install & use. See Site Style.

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 - SM, MD, or LG 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

Select Weights lists the weights the font comes in:

• 400 (Regular) and 700 (Bold) are selected by default
• Click any weight to toggle selection

The whole @fontsource/{font-id} package is installed, whichever weights you select.

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, but your site doesn't use it until you pick it in Site Style.

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, select it in Site Style to use it. Once a font is installed, the Font Manager shows an Open Site Style button.

1. Open Site ▾ › Site Style (or click Open Site Style in the Font Manager)
2. Go to Typography
3. Your installed fonts appear at the top of each font list, under Installed
4. Select a font for:
   • Body, heading & content font (--font-sans) -- used for all text
   • Heading font (--font-heading) -- turn on Use a different font for headings first
   • 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 Site Style, 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 Site Style and clicked Apply Theme
2. Check that the font import exists inside the frontmatter of BaseLayout.astro
3. Refresh the preview
4. Check browser dev tools for CSS conflicts

Installation Failed

If installation fails:

1. Verify your workspace (Codespace or local Docker container) is running
2. Check the status dot in the header for a connection problem
3. Try refreshing the page
4. Check the terminal for npm errors

Next Steps

• Icon Manager - Add icons to your project
• Site Style - Use your fonts across the site
• Design mode - Style elements visually
• Component Library - Pre-built sections