type

Version 0.1

Download and install

Each family has its own release on GitHub. Each release holds the TTF files for desktop use, the WOFF2 files for the web, and the licence.

Monospace

machine-made Weft 0.1

Download Weft 0.1 from GitHub

On your computer

Unzip the release. On macOS, open the TTF files and select Install. On Windows, right-click the files and select Install. On Linux, copy them to ~/.local/share/fonts and run fc-cache.

On the web

Copy the WOFF2 files to your site, then add this CSS. Change the path to where you put the files.

@font-face {
  font-family: "machine-made Weft";
  src: url("/fonts/MachineMadeWeft[FRAG,wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

code, pre, kbd {
  font-family: "machine-made Weft", ui-monospace, monospace;
}

/* FRAG: 0 is clean. Keep body text at 15 or below. */
.headline {
  font-family: "machine-made Weft", ui-monospace, monospace;
  font-variation-settings: "FRAG" 30;
}

For a static font, use MachineMadeWeft-Regular.woff2 with font-weight: 400, and MachineMadeWeft-Bold.woff2 with font-weight: 700.

Sans

machine-made Sans 0.1

Download Sans 0.1 from GitHub

On your computer

Install the two variable TTF files, upright and italic, the same way as Weft.

On the web

@font-face {
  font-family: "machine-made Sans";
  src: url("/fonts/MachineMadeSans[wght].woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "machine-made Sans";
  src: url("/fonts/MachineMadeSans-Italic[wght].woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: "machine-made Sans", system-ui, sans-serif;
}

Square brackets in a file name are valid in a URL path. If your server does not accept them, rename the files and change the CSS to match.

Display grotesk

machine-made Heddle 0.1

Download Heddle 0.1 from GitHub

On your computer

Install the variable TTF, or the static TTF files: nine weights at normal width, Compressed Bold and Extended Bold.

On the web

@font-face {
  font-family: "machine-made Heddle";
  src: url("/fonts/MachineMadeHeddle[wdth,wght].woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 70% 140%;
  font-style: normal;
  font-display: swap;
}

h1, .poster {
  font-family: "machine-made Heddle", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-stretch: 85%;
}

Heddle is a display face: use it at 24 px and up. For a static font, use MachineMadeHeddle-Regular.woff2 with font-weight: 400, and MachineMadeHeddle-Bold.woff2 with font-weight: 700.

Modern serif

machine-made Warp 0.1

Download Warp 0.1 from GitHub

On your computer

Install the six TTF or OTF files: machine-made Warp Regular, Italic, Bold and Bold Italic for text, and machine-made Warp Display Regular and Italic for titles. They show as two families.

On the web

@font-face {
  font-family: "machine-made Warp";
  src: url("/fonts/MachineMadeWarp-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "machine-made Warp";
  src: url("/fonts/MachineMadeWarp-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "machine-made Warp";
  src: url("/fonts/MachineMadeWarp-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "machine-made Warp";
  src: url("/fonts/MachineMadeWarp-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "machine-made Warp Display";
  src: url("/fonts/MachineMadeWarpDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "machine-made Warp", Georgia, serif;
  font-variant-numeric: oldstyle-nums; /* optional: the default figures are lining and tabular */
}
h1 {
  font-family: "machine-made Warp Display", Georgia, serif;
}

The text styles are drawn for 9 to 12 pt; use Display at 24 px and up. Small capitals: font-variant-caps: small-caps. The Display Italic file is MachineMadeWarpDisplay-Italic.woff2.

Packages

npm package coming

An npm package for each family is coming. Until then, use the files from the GitHub releases.

Licence

Free to use, change and share