Free Online CSS @font-face Generator

A professional-grade, client-side utility designed for web developers to generate valid, cross-browser compatible @font-face CSS blocks. The application provides an intuitive interface for uploading local font files and instantly generating the necessary CSS declarations.

Core Features

• Drag-and-Drop Upload: High-visibility drop zone for TTF and OTF font files.
• Dynamic Configuration: Real-time form to set font-family name, font-weight (100-900), and font-style (normal/italic).
• Instant Code Generation: Live-updating CSS output block that reflects changes in configuration immediately.
• Copy-to-Clipboard: One-click utility for copying the generated CSS snippet.
• Browser Compatibility: Generates standard-compliant CSS covering modern web requirements.
• Privacy-First Architecture: No server-side processing; all generation happens locally via browser APIs.

UI/UX Specification

• Aesthetic: Clean, minimalist light-mode design. Use a palette of crisp whites, soft grays (e.g., #F3F4F6), and a primary action color (e.g., #2563EB) for buttons.
• Layout:
  • Header: Simple, functional title and short instructional sub-text.
  • Main Area: A split-pane design; left side for configuration and file uploads, right side (or bottom on mobile) for the generated code snippet.
  • Modal System: Use a custom-built modal overlay for any necessary notifications (e.g., "Copied to clipboard!"), avoiding browser-native alerts.
• Typography: Use a modern sans-serif stack (Inter or System UI) for maximum readability.

Technical Implementation Directives

• Single File: All HTML, CSS, and JavaScript must reside in one file.
• No Storage: ABSOLUTELY NO use of localStorage, sessionStorage, or cookies. Use strictly in-memory state variables.
• Responsive: Use Tailwind CSS (via CDN) to ensure the interface wraps gracefully from desktop to mobile screens.
• Icons: Use Lucide Icons (via CDN) for a polished, professional look.
• Sandboxing: Code must be fully compatible with a null-origin iframe environment.
• Animations: Implement subtle CSS transitions (200ms ease-in-out) for all interactive states (hover, focus, click).