Instantly test and visualize variable font axes in the browser. Adjust weight, width, slant, and optical size in real-time with this free web-based font tool.
AI Generation Prompt
Technical Specification: Browser-Based Variable Font Testing Utility
Overview
A high-performance, single-file utility designed to allow designers and frontend developers to upload, preview, and manipulate variable font axes in real-time. The application provides a clean, professional interface for adjusting wght, wdth, slnt, and opsz (if supported) parameters, exporting the resulting CSS code for production use.
Core Feature List
- Drag-and-Drop Font Loading: Accept local
.ttfor.woff2files using theFileReaderAPI (in-memory only). - Dynamic Axis Detection: Automatically parse the font's
fvartable to generate the correct sliders for weight, width, slant, and optical size. - Real-Time Preview: Large, editable typography area to view how changes affect text strings immediately.
- Live CSS Generation: A persistent "Code Output" panel that updates as sliders move, providing a ready-to-copy snippet.
- Preset Controls: Reset buttons for all axes to quickly return to default/regular values.
- Interactive Text Input: A content-editable preview box to test specific copy, headlines, or long-form paragraphs.
UI Layout & Structure
- Header: Simple, centered title area. No branding.
- Layout Configuration:
- Sidebar (Left/Top): Contains the file upload zone and the dynamically generated sliders. Each slider includes a numerical input field that stays in sync with the slider handle.
- Preview Area (Main): A clean, white-background box that holds the typography output. Uses a high-quality typographic scale for font size (e.g., 72px base).
- CSS Output Area (Bottom): A fixed-width container with syntax highlighting (plain text) and a "Copy to Clipboard" button.
- Styling: Use a modern, light-mode palette:
#F8FAFC(background),#FFFFFF(panels),#475569(text), and#3B82F6(accent/slider thumb).
Technical Constraints & Directives
- Single File: The entire application must be one HTML file (CSS inside
<style>, JS inside<script>). - Storage: STRICTLY NO localStorage, sessionStorage, or indexedDB. All font handling must occur in JavaScript memory.
- Sandboxed Compatibility: Avoid any use of
alert(),confirm(), orprompt(). Use a custom hiddendivmodal for any user feedback. - Responsive: The layout must use Flexbox/Grid to stack columns on mobile devices and expand to a dual-pane layout on desktop.
- Performance: Use
requestAnimationFramefor slider interactions to ensure the font rendering does not jitter. - Security: Ensure no external requests are made other than CDN-based libraries (e.g., Tailwind CSS, Lucide icons).
Visual Design & Interaction
- Transitions: All CSS property changes on the preview text must have a
transition: font-variation-settings 0.1s ease-out;to ensure butter-smooth adjustments. - Interactive Elements: Slider handles should have a subtle drop-shadow and change color on
:hoverand:activestates to provide immediate tactile feedback. - Typography: The default font for the UI itself should be a neutral, highly readable system font (e.g., Inter or system-ui).
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a variable font and why use this tester?
A variable font is a single font file that acts as multiple fonts, allowing you to fluidly adjust properties like weight, width, and slant using CSS. This tool helps designers and developers preview these adjustments in real-time without needing complex design software, ensuring optimal typography for responsive web design. By manipulating font axes directly in the browser, you can fine-tune text legibility and aesthetic style for specific viewport sizes. This eliminates the guesswork involved in selecting the right font variations, streamlining the CSS development workflow for modern web projects.
Does this tool save my uploaded font files?
No, this application is strictly client-side and does not upload your files to any server or store them in permanent storage like localStorage or databases. All font processing happens entirely within your current browser session, ensuring your proprietary or private fonts remain completely secure on your local machine. Because this tool runs in a sandboxed environment, all font data is discarded as soon as you refresh or close the browser tab. This design philosophy prioritizes user privacy and security, making it a safe choice for professional projects where confidentiality is a critical requirement.
How do I export the font styles for my website?
Once you have configured the desired font axes using the sliders, simply click the 'Copy CSS' button located below the preview area. The application will generate the exact CSS snippet required for your project, including the 'font-variation-settings' property with your current axis values. You can then paste this CSS snippet directly into your stylesheet. The tool also provides the 'font-family' and 'font-weight' declarations if applicable, ensuring that your implementation is accurate and ready for production use across all major modern web browsers.
Are there limits on the types of font files I can test?
This tool supports standard variable font files, typically provided in the .ttf or .woff2 formats. As long as the font file includes variable font tables (fvar), the application will automatically parse the available axes and create dynamic sliders for you to experiment with. If you load a static font file, the axes sliders will simply not appear or will remain inactive, as there are no variable properties to manipulate. For the best experience, ensure your font files are valid variable font formats, which are increasingly standard in contemporary web design and digital publishing.
