@font-face Snippet Builder
Add font source files per weight/style variant and get correct, ready-to-paste @font-face CSS blocks.
About this tool
Each weight/style combination (e.g. regular 400 and bold 700) needs its own separate @font-face block sharing the same font-family name — the browser picks the right file automatically when you later use font-weight: bold or similar on that family. Within a block, when more than one file format is supplied the src list is ordered with woff2 first, since it's the smallest and most broadly supported modern format; browsers try each format() in order and use the first one they can load, so listing the best format first is the convention for leanest downloads on modern browsers while still providing fallbacks for older ones.
The format() hint uses CSS’s own keywords rather than file extensions: a .ttf file is format("truetype") and a .otf file is format("opentype"). Writing format("ttf"), a common mistake, makes browsers skip that source entirely. Today every current browser supports WOFF2, so a single WOFF2 file per weight is usually all you need; EOT only ever worked in old versions of Internet Explorer.
For a variable font, one file covers a whole range of weights: enter the range as the weight, for example 100 900, and add a single block.