Generate @font-face declarations for each named weight (Light, Regular, Medium, Bold, Black) of a variable font using font-variation-settings. Drop-in CSS.
Pick a variable font family name and weight presets you want to expose
We generate one @font-face per preset, mapping font-weight to a font-variation-settings axis value
Copy the full CSS block — your variable font now appears as discrete weight instances to the browser
0 bytes uploaded. Named Weight Instance Builder runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
CSS authors are used to writing font-weight: 600. Pre-binding common values to discrete @font-face entries means designers don't need to know font-variation-settings. The variable file is loaded once and shared across all weight presets.
Yes — the form takes any font-weight number 1–999 and any axis value within the variable font's range. Add as many as you need.
No. All @font-face blocks point to the same WOFF2 — only the font-variation-settings differ. The browser caches one copy of the file.
Drop a variable font and see every axis (wght, wdth, slnt, ital, opsz, custom) with min/default/max values, named instances, and ready-to-paste CSS.
Open toolPin a variable font's axes (weight, width, slant, optical size) to specific values and export a static TTF. Trim file size when you don't need the full axis range.
Open toolBuild a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open tool