Calculator
What the Font Face Generator does
Font Face Generator: generates Status and CSS from Font family, File path / URL and Weight. Example: font family Inter, file path / URL /fonts/Inter-Variable.woff2 and weight 100 900 gives status @font-face ready.
The Font Face Generator turns Font family, File path / URL, Weight and Style into Status and CSS. There is no submit step; the numbers move as you adjust them.
It is mostly used by engineers checking an encoding. Pasting a production payload into an unknown web tool is a real risk, which is why this one stays local.
The work is done by JavaScript already loaded in your browser, so your input never crosses the network.
Everything needed to verify a result is further down: the fields, the method and one fully worked example.
What do the Font Face Generator fields mean?
The Font Face Generator uses 4 inputs. Rather than an empty form you get a filled one, useful when you only want to test a single change.
| Field | What to enter | Default |
|---|---|---|
| Font family | optional | Inter |
| File path / URL | optional | /fonts/Inter-Variable.woff2 |
| Weight | optional | 100 900 |
| Style | choose from normal or italic | normal |
How does the Font Face Generator work?
Each output is derived from the inputs above in a single pass; there is no hidden state carried between runs, so the same inputs always give the same generated output.
Validation runs before the calculation, which is why a mistyped value shows an error rather than a plausible-looking result.
Worked example
These are the values the Font Face Generator loads by default, and the result it produces from them. The defaults produce the result shown here; change any of them and the answer moves.
| Font family | Inter |
|---|---|
| File path / URL | /fonts/Inter-Variable.woff2 |
| Weight | 100 900 |
| Style | normal |
| Status | @font-face ready |
|---|---|
| CSS | @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100… |
How to use it
- Key in Font family.
- Fill in File path / URL.
- Type Weight.
- Pick a value for Style: the options are normal or italic.
- It runs on every change, so there is no moment where the screen is out of date.
- Read Status and CSS in the results panel.
- If you need a record, Copy Link saves the inputs and Print produces a clean page.
What this tool does not do
- Processing happens in your browser, so extremely large inputs are bounded by available memory.
- Output follows the common convention for this format; a specific toolchain may have its own house style.
- It handles the common case well and the unusual case literally.
Frequently asked questions
Font family, File path / URL, Weight and Style. That is the whole form. A starting value is in place for each, so nothing is mandatory before you see a result.
With the values loaded when the page opens, status comes out as @font-face ready. Edit any input and that figure moves with it.
No. There is no account, no session and no storage. The values exist only while the tab is open.
No cost and no account. Use it as often as you like.
It follows the standard definition for this operation, so the result matches what a reference implementation would give.