Fonts

Catnip uses Inter as the primary typeface. The variable font supports weights 100–900.

Install

npm install @signicat/catnip-assets

Usage

Reference the font in your CSS:

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("@signicat/catnip-assets/fonts/inter/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
}

For italic:

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("@signicat/catnip-assets/fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
}

@signicat/catnip-css includes Inter by default. See Typography tokens for the type scale.