1. Download the web pack
On any font page, choose Web WOFF2 + CSS. The zip contains .woff2 files for each weight and a fonts.css file. WOFF2 is the modern web font format: small, compressed and supported by every current browser.
2. Upload the files
Put the .woff2 files in a folder on your site, for example /fonts/. On WordPress, upload them with your theme files or a font plugin; on Shopify, upload them to Files.
3. Add @font-face to your CSS
Copy the rules from fonts.css into your stylesheet. Each rule tells the browser a family name, a weight and where the file lives. A typical rule looks like this: @font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
4. Use the font
Set it on the elements you want. For example body { font-family: "Inter", system-ui, sans-serif; } and h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; }. The names after the first are fallbacks while the font loads.
Keep it fast
- Only load the weights you use. Regular and bold are often enough.
- Keep font-display: swap so text shows immediately in a fallback font.
- Preload your main text font with <link rel="preload" as="font" type="font/woff2" crossorigin>.
- A variable font can replace many separate weight files with one.