Fonts

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

With @signicat/catnip-css

You usually do not need a manual @font-face:

• npm — import "@signicat/catnip-css" @imports design-tokens + icons and resolves Inter through @signicat/catnip-assets (font files stay in those packages).
• CDN — css/latest/styles.css inlines tokens + icons and uses relative ./fonts/inter/… urls; font files are uploaded next to the stylesheet.

See Typography tokens for the type scale.

Standalone (assets only)

When you are not using @signicat/catnip-css:

npm install @signicat/catnip-assets

@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");
}

@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");
}