ChewpackChewpack

Guide · About 10 minutes

Put your font on a website

Check the font, export WOFF2 and use it with @font-face.

  1. Step 1: Fill in the names

    In Font Info › Names, set the family name, version, designer and licence. Browsers and font tools show them.

  2. Step 2: Check the font

    Font › Check font lists anything that would go wrong: a missing space, features that don't compile, points just off a line.

  3. Step 3: Export WOFF2

    Press Ctrl+E and choose the WOFF2 card: the smallest format, supported by every current browser.

    CtrlE

  4. Step 4: Upload and use it

    Put the .woff2 file on your server and declare it with @font-face, then use the family name in font-family.

    css
    @font-face {
  font-family: "My Font";
  src: url("/fonts/MyFont-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

body { font-family: "My Font", sans-serif; }

  5. Step 5: Proof it

    Before shipping, check the font in the Proofing workspace at real sizes, or print a PDF proof.

    CtrlP