Square Bot Sans — Usage — Another Planet Creative Experience

Usage

Install and use the font in apps and on the web.

Local/GitHub full variable font

Use the rebuilt WOFF2 variable font for local or GitHub-hosted web projects. It includes ital, wdth, and wght axes.

@font-face {
  font-family: "Square Bot Sans";
  src: url("/fonts/squarebot/SquareBotSans[ital,wdth,wght].woff2") format("woff2-variations");
  font-display: swap;
  font-synthesis: none;
  font-weight: 200 900;
  font-stretch: 80% 120%;
}

body {
  font-family: "Square Bot Sans", ui-sans-serif, system-ui, sans-serif;
}

.tuned {
  font-variation-settings: "ital" 1, "wdth" 100, "wght" 650;
}

.operators {
  font-feature-settings: "dlig" 1;
}

Google Fonts candidate

Use separate Roman and Italic variable fonts for the Google Fonts candidate. Width is prepared as 75 / 100 / 125 stops, and italic is selected with font-style.

@font-face {
  font-family: "Square Bot Sans";
  src: url("/path/to/SquareBotSans[wdth,wght].woff2") format("woff2");
  font-display: swap;
  font-synthesis: none;
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

@font-face {
  font-family: "Square Bot Sans";
  src: url("/path/to/SquareBotSans-Italic[wdth,wght].woff2") format("woff2");
  font-display: swap;
  font-synthesis: none;
  font-style: italic;
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

body {
  font-family: "Square Bot Sans", ui-sans-serif, system-ui, sans-serif;
}

em {
  font-style: italic;
}