Problem

When users selected fonts from the font panel, the fonts were often only partially implemented and didn't work correctly with Tailwind CSS classes. The system was properly:

• ✅ Adding fonts to Tailwind config
• ✅ Adding font imports to layout files
• ✅ Loading fonts via WebFont API

But it was missing the critical step of injecting CSS variables into the user's globals.css file.

This meant that Tailwind font classes like font-inter would fail because var(--font-inter) was undefined in the CSS.

Solution

Added a new CSSManager class that automatically injects CSS variables into the user's globals.css file when fonts are added through the font panel.

Before the fix:

/* globals.css - no font variables */
html, body { margin: 0; }

// ❌ This doesn't work - var(--font-inter) is undefined
<div className="font-inter">Hello World</div>

After the fix:

/* globals.css - CSS variables properly injected */
/* Onlook Font Variables */
:root {
 --font-inter: 'Inter', sans-serif;
}
html, body { margin: 0; }

// ✅ This now works correctly 
<div className="font-inter">Hello World</div>

Key Features

• 🎯 Automatic CSS Variable Injection: CSS variables are injected as --font-{id}: '{family}', sans-serif;
• 🧹 Clean Removal: Variables are properly removed when fonts are deleted, including cleanup of empty sections
• 🛡️ Error Resilient: Gracefully handles missing globals.css files (fonts still work via WebFont loading)
• 🔍 Smart Detection: Finds globals.css in common Next.js locations (src/styles/, styles/, src/app/, etc.)
• 🔄 Integrated Workflow: Seamlessly integrates with existing font management system

Implementation Details

1. CSSManager - New class that handles CSS variable injection/removal
2. Updated FontManager - Integrated CSS manager into existing font workflow
3. File Detection - Automatically finds globals.css in standard locations
4. CSS Format - Injects variables in :root selector with proper fallbacks

Testing

• ✅ 10 comprehensive unit tests for CSSManager
• ✅ 2 integration tests demonstrating complete font lifecycle
• ✅ All existing tests pass (965 total tests)
• ✅ TypeScript compliance verified

This fix ensures that fonts loaded from the font panel are immediately functional and can be used with Tailwind CSS classes without any additional manual configuration.

💬 Share your feedback on Copilot coding agent for the chance to win a 200ドル gift card! Click here to start the survey.