Fix font CSS variable injection for fonts loaded from font panel

[Copilot]

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.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• f.hubspotusercontent40.net

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[bug] Fonts loaded from the font panel are not implemented correctly</issue_title>
<issue_description>#### Describe the bug
If the user chooses a font from the font panel, it is often only partially implemented. It may still needed to be added to the globals.css to be used correctly in the project </issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #2912

---

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
web	Canceled			Sep 25, 2025 6:10am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Sep 25, 2025 6:10am

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.