font-display Code Generator
Compare CSS font-display values and generate @font-face code
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you visually compare how the CSS font-display values (auto, block, swap, fallback, optional) behave during font loading, using an interactive timeline. Just enter a font family name and font URL, and it instantly builds the matching @font-face snippet. Everything runs locally in your browser with nothing sent to a server, making it handy for front-end developers choosing the right strategy to avoid FOUT, FOIT, or layout shift (CLS).
How to use
- Enter your font family name and the font file URL or path.
- Pick a font-display value to inspect — swap, block, fallback, optional, or auto.
- Review the block/swap periods and the visual loading timeline to see how that value behaves.
- Copy the auto-generated @font-face snippet with the copy button and paste it into your CSS.
FAQ
- Which font-display value should I use?
- swap is a common choice when readability matters most, while optional is often recommended to minimize layout shift (CLS). Compare the timelines and descriptions in the tool to pick what fits your site.
- Can I use the generated code as-is?
- It produces a basic @font-face rule with your font-family, src, and chosen font-display value filled in. Adjust font-weight or font-style if you need different variants.
- Is the font URL I enter sent anywhere?
- No. Your input is only used locally to build the code snippet and is never transmitted.