Fontik

How to use a font on a website with CSS

To show a font on your own site, put its WOFF2 files on your server and declare them in CSS with @font-face. Visitors do not need to install anything.

Last updated:

Steps

  1. Use the WOFF2 files: they are small and supported by all current browsers. The web kit archive you can download from the font page contains WOFF2 files and ready-made CSS.
  2. Put the font files on your own server, for example in the /fonts/ folder.
  3. Declare the font in CSS with @font-face: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Use it in your styles and always list fallback fonts: body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap shows the text at once in a fallback font and swaps in your font when it has loaded.
  6. For a variable font, use one file and declare the weight range in @font-face, for example font-weight: 100 900.

Tips

  • Preload the main file with this tag in the head of the page: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Keep only the weights you actually use.
  • Serve the files from the same origin as the page, or send CORS headers if they come from another domain.
  • Check that the license allows web embedding; free fonts with open licenses usually do.

Questions

Which files do I need for a website?

The WOFF2 files. They are small and work in all current browsers; the web kit on the font page contains them together with ready-made CSS.

Do visitors have to install the font?

No: the browser downloads the font from your server as soon as the page asks for it.

Can I use the font in a commercial project?

That depends on the font license. Read it on the font page in the catalogue.

Other guides