Build a CSS @font-face declaration from font files

Provide the family name, one or more font source paths with their format hints, plus the intended weight and style. The result is deterministic, ready to copy into a stylesheet, and preserves the source order you choose so modern formats can appear before fallback files. It also reports the normalized inputs and source count, making the output straightforward to inspect or use in an automated asset pipeline.

Describe the font files in the order browsers should try them

Start with the public family name that your application will use in a font-family property. Then add every source as a separate record containing a path and a format hint. Source order matters because a browser reads the src list from left to right and selects the first resource it supports. A common arrangement places a compact WOFF2 file first and a WOFF fallback second. The builder keeps that order exactly; it does not sort, infer, fetch, or inspect your files. Paths may be relative URLs such as /fonts/newsreader.woff2 or complete asset URLs. The format value is emitted as an explicit CSS format hint, so use the label that matches the actual file. Quotation marks and backslashes inside family names, paths, and formats are escaped for CSS strings. Empty strings and descriptor-breaking characters are rejected instead of producing a rule that looks plausible but fails when pasted into a stylesheet. At least one source is mandatory because an @font-face rule without a usable src descriptor cannot load a font file.

Set weight and style to match the file you are declaring

The font-weight and font-style descriptors tell the browser which requests this face can satisfy. They should describe the font data rather than the visual treatment you hope the browser will synthesize. For a regular static font, weight 400 and style normal are typical. An italic file commonly uses the same weight with style italic, while bold may use weight 700. Variable fonts can use supported descriptor ranges, such as 100 900 for weight, when the file genuinely contains that axis. The builder accepts CSS descriptor text rather than restricting these fields to a short menu, which allows both conventional values and valid variable-font syntax. It trims surrounding whitespace and rejects line breaks, braces, and semicolons that could escape the descriptor. It does not determine whether a particular font binary contains the declared weight or style; that remains an asset-authoring concern. Create a separate rule for each static face, and keep the family name consistent when the files belong to one family. This lets normal CSS font matching choose the correct face without changing declarations throughout your site.

Copy the result into a stylesheet or generate it during a build

The output contains a formatted CSS rule plus the normalized family, source count, weight, and style. Copy the css value into a stylesheet before the selectors that use the family, or call the endpoint from a build script that assembles font assets. The generated rule focuses only on the required source, family, weight, and style descriptors. It deliberately does not guess optional properties such as font-display, unicode-range, size-adjust, ascent-override, descent-override, or feature settings, because those choices depend on loading policy, glyph coverage, and metric compatibility. Add such descriptors after generation when your project requires them. The tool performs no network request and never verifies that a path resolves, so test the final stylesheet in the environments you support and watch the browser network panel for missing assets or incorrect MIME configuration. The deterministic serializer is especially useful when several teams publish fonts: identical input always produces identical output, source precedence stays reviewable, and invalid empty source lists fail early. Browser use is free, while an automated API request uses the displayed base price of $0.002.