# Variable Font Axis Instance and CSS Font Variation Settings Builder Upload a variable font (TTF/OTF/WOFF/WOFF2) to inspect its fvar axes and named instances, preview interpolation live in the browser, and generate ready-to-paste font-variation-settings CSS plus the equivalent high-level properties and a variable @font-face block. > Canonical page: https://elysiatools.com/en/tools/variable-font-axis-instance-and-css-font-variation-settings-builder - **Category:** Design - **Keywords:** variable font, fvar axes, named instances, font-variation-settings css, wght wdth axis, variable font preview, woff2 inspector ## Overview Reads the OpenType fvar table (axes with min/default/max plus named instances) via opentype.js, with WOFF2 unpacked through the wawoff2 WebAssembly port. The CSS builder follows CSS Fonts Level 4 §8.2: axis tags are matched case-sensitively, repeated tags keep the last value, and the emitted font-variation-settings list is de-duplicated and sorted in ascending order by code unit like the spec computed value. Where high-level replacements exist (wght→font-weight, wdth→font-width, slnt/ital→font-style with the slnt angle negated, opsz→font-optical-sizing), they are emitted as the recommended alternative. The preview embeds the uploaded font as a data-URI @font-face, renders each axis extreme, every named instance, your custom coordinates, and an interactive slider playground that prints the CSS live. ## Inputs - **Font file** (file): Upload a variable font (.ttf / .otf / .woff / .woff2) - **Axis values** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults - **Preview text** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→" ## When to use - Inspecting variable font axes, default ranges, and named instances from TTF, OTF, WOFF, or WOFF2 files. - Testing custom axis values and typographic variations in a live browser preview before deploying web fonts. - Generating spec-compliant font-variation-settings, standard CSS property equivalents, and @font-face declarations for production stylesheets. ## How it works - Upload a variable font file (.ttf, .otf, .woff, or .woff2) to parse its OpenType fvar table and unpack WOFF2 data directly in your browser. - Provide custom axis coordinates or use the interactive slider playground to explore axis limits, named presets, and custom interpolation extremes. - Copy the generated CSS containing canonical font-variation-settings, recommended high-level replacements (font-weight, font-width, font-style, font-optical-sizing), and @font-face declarations. ## Use cases - Web designers fine-tuning optical weights and width ratios for responsive typography across device breakpoints. - Frontend engineers auditing variable font files to identify supported axes and named presets without desktop font editing software. - Design system maintainers standardizing variable CSS tokens and @font-face declarations for enterprise UI libraries. ## Frequently asked questions ### What font formats are supported? You can upload variable fonts in TTF, OTF, WOFF, and WOFF2 formats up to 15 MB. ### How does the tool format font-variation-settings? It follows CSS Fonts Level 4 §8.2 by deduplicating repeated tags and sorting axis tags in ascending order by code unit. ### Does it provide alternatives to font-variation-settings? Yes, it generates standard high-level properties like font-weight, font-width, font-style, and font-optical-sizing when standard registered axes are present. ### Are font files uploaded to a remote server? No, all font parsing, axis inspection, and live previews execute client-side in your browser. ### What happens if duplicate axis tags are supplied? Per CSS specifications, repeated axis tags keep the last specified value and are clamped within the font's min/max bounds. ## Related tools - [PDF Strikethrough Review Extractor](https://elysiatools.com/en/tools/pdf-strikethrough-review-extractor): Detect strikethrough-marked text in review PDFs and generate a report for contract, policy, and revision analysis - [Audio Read-Along Cue Generator](https://elysiatools.com/en/tools/audio-read-along-cue-generator): Generate sentence or word-level timestamp cues from a narration audio and its script, for karaoke-style reading and language learning. - [Font File Inspector](https://elysiatools.com/en/tools/font-file-inspector): Inspect TTF/OTF/WOFF/WOFF2 fonts: metadata, glyph counts, metrics, style flags, Unicode coverage heatmap, glyph SVG previews, ligatures, OpenType features and variable-font axes. - [Image Palette to Design Tokens](https://elysiatools.com/en/tools/image-to-design-tokens): Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each - [VP8 Image Analyzer](https://elysiatools.com/en/tools/vp8-image-analyzer): Analyze a WebP/VP8 image with Sharp, generate a grayscale displacement map, and render it as an interactive Three.js 3D relief surface - [CSS Fluid Typography Clamp Calculator](https://elysiatools.com/en/tools/css-fluid-typography-clamp-calc): Generate a clamp() expression from min and max viewport and font-size bounds, with copy-ready CSS and preview data - [CSV to Database Migration Planner](https://elysiatools.com/en/tools/csv-to-database-migration-planner): Infer a relational schema from CSV data and generate create-table plus ALTER migration plans for PostgreSQL, MySQL, SQLite, or SQL Server - [Image Steganography Embed & Detect](https://elysiatools.com/en/tools/image-steganography-embed-detect): Hide text in a PNG's least-significant bits, extract it back, and run the Westfeld–Pfitzmann chi-square steganalysis with a falling-p curve and LSB plane preview. ## Samples - [Variable Font Samples](https://elysiatools.com/en/samples/variable-font-samples): Variable font files with fvar axes for the axis/instance inspector and CSS builder - [Bulma CSS Framework Samples](https://elysiatools.com/en/samples/bulma): Bulma CSS framework examples including columns, components, form controls, layout system, and modern CSS-based design patterns - [CSS Selector Samples](https://elysiatools.com/en/samples/css-selectors): Collection of CSS selector examples for extraction and analysis testing - [Invalid Variable Names Code Samples](https://elysiatools.com/en/samples/code-invalid-variable-names-samples): Sample code files demonstrating invalid variable naming conventions across different programming languages