g3n-data
Support繁中
← All tools

CSS Font Face Generator

Build @font-face declarations from 1–6 URL or local file references, encode local data URIs and explicitly preview selected local fonts.

css-font-face-generatorLOCAL WORKSPACE

Enabling local controls…

Tool settings

Source 1

Local font preview

Using a system font. Select a local file and press its preview button; URLs are never loaded.

The quick brown fox jumps over the lazy dog.

Only the selected file is loaded through a FontFace ArrayBuffer; no URL is loaded. Format support depends on this browser; legacy EOT/SVG may fail. Preview errors do not affect generated CSS.

Editing clears the previous result; generate again.

URLs are never fetched and files are never uploaded. Local preview uses FontFace ArrayBuffer support, not a guarantee for all formats; EOT/SVG may fail. Editing, clearing or leaving removes the preview font. File limit 1 MiB each; output limit 4 MiB. Check licensing and deployment CORS separately.

Processed in local memory; inputs are not transmitted or stored.

Static source date: 2026-10-18

Preview and complete output

Set the controls, then generate.

How to use this tool

Set family, weight, style and display, add sources and export CSS. For local files, press the source preview button to load that font temporarily in the sample text.

When not to use it

URLs are never fetched and files are never uploaded. Local preview uses FontFace ArrayBuffer support, not a guarantee for all formats; EOT/SVG may fail. Editing, clearing or leaving removes the preview font. File limit 1 MiB each; output limit 4 MiB. Check licensing and deployment CORS separately.