font-display Code Generator
Compare web font loading strategies and generate the matching @font-face code
See exactly how each CSS font-display value — auto, block, swap, fallback, and optional — behaves, side by side on a visual loading timeline. Enter a font name and URL and the tool writes the @font-face rule with your chosen value baked in. Everything is computed in your browser and nothing is sent to a server, making it handy for front-end developers and web designers weighing FOUT, FOIT, and CLS trade-offs before picking a value.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Enter your font family name and the font file URL (or path).
- Use the tabs to select the font-display value you want to examine: swap, block, fallback, optional, or auto.
- Check the block period, swap period, and loading timeline graph to see how that value behaves.
- Hit the copy button on the generated @font-face code below and paste it into your project's CSS.
FAQ
- Which font-display value should I choose?
- The common advice: use swap if readability matters most, or optional if you want to minimize layout shift (CLS). Compare the timelines and notes in the tool and pick what fits your site.
- Can I use the generated code as-is?
- The tool outputs a basic @font-face rule with your font-family, src path, and font-display value. If you're loading other weights or styles, adjust font-weight and font-style to match your project.
- Is the font URL I enter sent to a server?
- No. Your input is only used to assemble the code inside your browser and is never transmitted anywhere.