Font

@bloxwap/font packages Bloxwap Sans, Mono, and Pixel as variable web fonts. Sans and Mono include script companions that load only when your text needs them.

Project site · Documentation · GitHub · npm

Install

npm install @bloxwap/font

Use CSS

Import the stylesheet once in your app:

import '@bloxwap/font/css';

Then assign the font families:

body { font-family: 'Bloxwap Sans', system-ui, sans-serif; }
code, pre { font-family: 'Bloxwap Mono', ui-monospace, monospace; }
.score { font-family: 'Bloxwap Pixel', monospace; }

Each family supports weights from 100 to 900. Pixel also has a roundness axis: set font-variation-settings: 'ROND' 60 to try it.

Use Next.js

Next.js 15 or later can use the package's next/font/local exports:

import type { ReactNode } from 'react';
import { BloxwapSans } from '@bloxwap/font/sans';
import { BloxwapMono } from '@bloxwap/font/mono';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={`${BloxwapSans.variable} ${BloxwapMono.variable}`}>
      <body className={BloxwapSans.className}>{children}</body>
    </html>
  );
}

Next.js self-hosts the fonts. The variable classes expose --font-bloxwap-sans and --font-bloxwap-mono; use font-family: var(--font-bloxwap-mono), monospace for code and data.

Go further

• Type tester — preview families, weights, and sample text.
• Installation guide — desktop downloads, self-hosting, and Tailwind CSS setup.
• Multiple scripts — use script companions under the same family names.
• Brand assets — Bloxwap's typography, logos, and colors.

Font is released under the SIL Open Font License 1.1.