CSS Font-face Kit Builder

How to use CSS Font-face Kit Builder

Generate escaped font-face CSS and optional first-face preload source from your authored web-font URLs and face descriptors. Keep the declared family, format, weight range, style and display policy together in a downloadable CSS file. This is a source kit for fonts you already intend to host; it neither loads a font nor guesses its actual metadata or embedding rights.

1. Provide optional font-kit json, family and selected faces as json.
2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
3. Copy the result or download a separate output; reset to clear the current form.

Good to know

• One UTF-8 JSON model up to50,000 bytes,10,000 values and40 levels. Supply family,1–12 faces and optional actual boolean preloadFirst. Family is a nonblank single line up to100 bytes; exact duplicate URL/style/weight tuples are refused.
• Each face has url, format, weight, style, display. Weight contains one or two ascending exact plain integers1–1000. Selected formats: woff2, woff, ttf, otf; style: normal/italic; display: auto/block/swap/fallback/optional.
• URLs are at most 1,000 UTF-8 bytes and select whitespace-free HTTPS or relative references without fragments, backslashes, credentials, protocol-relative, data/javascript or other schemes. URL syntax is not proof that a font exists or that a server is safe.
• CSS strings and optional first-face preload attribute values are escaped for their separate contexts. The preload source is available in the report; the download is font-face-kit.css. Nothing is mounted, installed, activated, loaded or fetched.
• No local() source, unicode-range, oblique angles, metric overrides, named instances or font bytes/coverage/license inspection. Authored variable weight ranges and format labels may disagree with the actual file and are not certified here.
• Review real MIME, CORS, caching, font selection, loading, layout and embedding rights separately. Declared faces can overlap and may not behave as you intend in a live stylesheet.
• A same-origin module Worker loads its selected code, including the YAML writer for Dependabot, before ready within 10 seconds. A separate2-second computation deadline follows. Source is never evaluated, fetched, submitted, uploaded or automatically saved.
• Structured text output is limited to 500,000 characters. Reduce the supplied source when that separate output budget is exceeded.
• Inputs are processed on this device and are not automatically saved or uploaded.