Foundation

Abnormal Fonts

@font-face rules for projects without next/font. The woff2 files are served at /fonts.

Preview

Bricolage Grotesque for headings

Inter for everything you read in the interface.

JetBrains Mono for code and addresses

Install

pnpm dlx shadcn@latest add @abnormal/fonts

Usage

export default function FontsDemo() {
  return (
    <div className="grid w-full gap-5">
      <p className="font-heading text-3xl font-semibold">Bricolage Grotesque for headings</p>
      <p className="font-sans text-lg">Inter for everything you read in the interface.</p>
      <p className="font-mono text-base">JetBrains Mono for code and addresses</p>
    </div>
  );
}

Source

/*
 * Self-hosted variable fonts for projects without next/font. Install with `shadcn add @abnormal/fonts`,
 * import it after the theme, and put the three woff2 files in public/fonts (a registry item can only carry text,
 * so they are served at <registry>/fonts/ to download).
 */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}