BloxwapFont

Installation

Download Bloxwap Font for desktop apps, install it from npm, self-host it with @font-face, or use it with Next.js, Tailwind CSS and CSS custom properties.

Download

Each zip contains every format for its family (OTF, hinted TTF, WOFF2, WOFF and variable TTF/WOFF2) plus OFL.txt.

DownloadContentsSize
Bloxwap-Fonts.zipSans, Mono and Pixel, all formats, OFL.txt (script companions download separately)37.9 MB
BloxwapSans.zipBloxwap Sans: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable15.9 MB
BloxwapMono.zipBloxwap Mono: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable15.0 MB
BloxwapPixel.zipBloxwap Pixel: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable6.9 MB
BloxwapSansArabic.zipBloxwap Sans Arabic: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable10.5 MB
BloxwapMonoArabic.zipBloxwap Mono Arabic: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable10.0 MB
BloxwapSansKR.zipBloxwap Sans KR: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable29.7 MB
BloxwapMonoKR.zipBloxwap Mono KR: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable29.4 MB
BloxwapSansSC.zipBloxwap Sans SC: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable46.1 MB
BloxwapMonoSC.zipBloxwap Mono SC: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable45.6 MB
BloxwapSansJP.zipBloxwap Sans JP: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable34.5 MB
BloxwapMonoJP.zipBloxwap Mono JP: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable34.0 MB
BloxwapSansHebrew.zipBloxwap Sans Hebrew: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable8.1 MB
BloxwapMonoHebrew.zipBloxwap Mono Hebrew: 9 OTF, 9 TTF, 9 WOFF2, 9 WOFF, 2 variable7.5 MB
BloxwapSansArmenian.zipBloxwap Sans Armenian: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable17.1 MB
BloxwapMonoArmenian.zipBloxwap Mono Armenian: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable16.1 MB
BloxwapSansGeorgian.zipBloxwap Sans Georgian: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable17.5 MB
BloxwapMonoGeorgian.zipBloxwap Mono Georgian: 18 OTF, 18 TTF, 18 WOFF2, 18 WOFF, 4 variable16.5 MB

Install on your computer

Use the OTF files for desktop apps (design tools, word processors). The variable TTF also works in apps that support variable fonts and gives you every weight in one file. Install one or the other, not both, or your apps will list duplicate styles.

Unzip the download, open the otf folder, select all files and double-click them. Click Install in Font Book. To install for all users, drag them to /Library/Fonts.

Use on the web

Install from npm

@bloxwap/font has every family's variable WOFF2, the stylesheet and next/font exports:

npm install @bloxwap/font

Import the stylesheet once (any bundler), then use the family names as with the hosted stylesheet below:

import '@bloxwap/font/css';

The quickest option. One stylesheet defines Bloxwap Sans, Bloxwap Mono and Bloxwap Pixel with variable fonts, and merges the companion scripts into the same family names:

<link rel="stylesheet" href="https://bloxwap.github.io/font/bloxwap-font.css">
body { font-family: "Bloxwap Sans", system-ui, sans-serif; }
code, pre { font-family: "Bloxwap Mono", ui-monospace, monospace; }

Fonts download only when text uses them. For production we recommend self-hosting, so your site does not depend on another origin.

Self-host with @font-face

Copy the web fonts. From the zip, copy the files in variable/ ending in .woff2 to your site, for example to /fonts. For Bloxwap Sans:

FileKindSize
BloxwapSans-Italic[wght].woff2Variable323 KB
BloxwapSans[wght].woff2Variable304 KB
BloxwapSans-Black.woff2Static160 KB
BloxwapSans-BlackItalic.woff2Static166 KB
BloxwapSans-Bold.woff2Static162 KB
BloxwapSans-BoldItalic.woff2Static167 KB
BloxwapSans-ExtraBold.woff2Static162 KB
BloxwapSans-ExtraBoldItalic.woff2Static168 KB
BloxwapSans-ExtraLight.woff2Static160 KB
BloxwapSans-ExtraLightItalic.woff2Static164 KB
BloxwapSans-Italic.woff2Static166 KB
BloxwapSans-Light.woff2Static159 KB
BloxwapSans-LightItalic.woff2Static162 KB
BloxwapSans-Medium.woff2Static159 KB
BloxwapSans-MediumItalic.woff2Static166 KB
BloxwapSans-Regular.woff2Static159 KB
BloxwapSans-SemiBold.woff2Static160 KB
BloxwapSans-SemiBoldItalic.woff2Static165 KB
BloxwapSans-Thin.woff2Static150 KB
BloxwapSans-ThinItalic.woff2Static159 KB

Declare the families. One rule per file; the weight range tells the browser that a single file covers every weight:

@font-face {
  font-family: "Bloxwap Sans";
  src: url("/fonts/BloxwapSans-Italic[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bloxwap Sans";
  src: url("/fonts/BloxwapSans[wght].woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Use them.

body {
  font-family: "Bloxwap Sans", system-ui, sans-serif;
  font-weight: 400; /* any value from 100 to 900 */
}

Static fallbacks

Every current browser supports variable fonts. If you must support one that does not, add static WOFF2 files (from the zip's woff2/ folder) inside a feature query, so modern browsers never download them:

@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: "Bloxwap Sans";
    src: url("/fonts/BloxwapSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bloxwap Sans";
    src: url("/fonts/BloxwapSans-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Bloxwap Sans";
    src: url("/fonts/BloxwapSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bloxwap Sans";
    src: url("/fonts/BloxwapSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
}

Static files are named <Family>-<Style>.woff2: Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black, and the same with Italic appended (the regular italic is just Italic).

Preload the main file

Preload the upright Sans file so text renders in Bloxwap Sans on first paint. The crossorigin attribute is required, even for same-origin fonts:

<link rel="preload" href="/fonts/BloxwapSans[wght].woff2" as="font" type="font/woff2" crossorigin>

Next.js

With the npm package, import a family and add its class names. Each export comes from next/font/local, so Next.js self-hosts and preloads it; Sans and Mono include the script companions, downloaded only for text in those scripts:

app/layout.tsx
import { BloxwapSans } from '@bloxwap/font/sans';
import { BloxwapMono } from '@bloxwap/font/mono';

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

The variable class names define --font-bloxwap-sans and --font-bloxwap-mono (and --font-bloxwap-pixel from @bloxwap/font/pixel).

Without the package

Put the variable WOFF2 files next to your layout (for example in app/fonts/) and load them with next/font/local. Next.js self-hosts them, adds preload tags and generates a size-adjusted fallback:

app/layout.tsx
import localFont from 'next/font/local';

const sans = localFont({
  src: [
    { path: './fonts/BloxwapSans[wght].woff2', weight: '100 900', style: 'normal' },
    { path: './fonts/BloxwapSans-Italic[wght].woff2', weight: '100 900', style: 'italic' },
  ],
  variable: '--font-bloxwap-sans',
  display: 'swap',
});

const mono = localFont({
  src: [
    { path: './fonts/BloxwapMono[wght].woff2', weight: '100 900', style: 'normal' },
    { path: './fonts/BloxwapMono-Italic[wght].woff2', weight: '100 900', style: 'italic' },
  ],
  variable: '--font-bloxwap-mono',
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${sans.variable} ${mono.variable}`}>
      <body>{children}</body>
    </html>
  );
}
app/globals.css
body { font-family: var(--font-bloxwap-sans), system-ui, sans-serif; }
code, pre { font-family: var(--font-bloxwap-mono), ui-monospace, monospace; }

For Bloxwap Pixel, load BloxwapPixel[ROND,wght].woff2 the same way and set ROND with font-variation-settings.

Tailwind CSS v4

Declare the families with @font-face (or the hosted stylesheet), then map them to theme variables in your CSS entry file:

app.css
@import "tailwindcss";

@theme {
  --font-sans: "Bloxwap Sans", ui-rounded, system-ui, sans-serif;
  --font-mono: "Bloxwap Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-pixel: "Bloxwap Pixel", "Bloxwap Mono", ui-monospace, monospace;
}

font-sans and font-mono now use Bloxwap Font, and the new font-pixel utility is available. Weights are ordinary utilities, and arbitrary values reach any point on the axis:

<h1 class="font-sans font-semibold tracking-tight">Portfolio</h1>
<span class="font-sans font-[450] tabular-nums">$67,421.08</span>
<code class="font-mono">a !== b</code>
<div class="font-pixel text-6xl font-bold [font-variation-settings:'ROND'_60]">SCORE 9001</div>

With next/font/local, use --font-sans: var(--font-bloxwap-sans), … instead.

CSS custom properties

Without a framework, keep the stacks in custom properties so every component uses the same fallbacks:

:root {
  --font-ui: "Bloxwap Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: "Bloxwap Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Bloxwap Pixel", "Bloxwap Mono", ui-monospace, monospace;
}

body { font-family: var(--font-ui); }
code, kbd, pre { font-family: var(--font-code); }
.scoreboard { font-family: var(--font-display); }
Edit on GitHub

Overview

Bloxwap Font is a free, open-source type system of three rounded typefaces for interfaces, code and screens.

Usage

Use Bloxwap Font weights, italics, variable axes, OpenType features and localized forms in CSS.

On this page

DownloadInstall on your computerUse on the webInstall from npmLink the hosted stylesheetSelf-host with @font-faceStatic fallbacksPreload the main fileNext.jsWithout the packageTailwind CSS v4CSS custom properties