Fixing ASCII Art Rendering in 0xProto with Nerd Fonts

Fixing ASCII Art Rendering in 0xProto with NerdFontMono

fc-query 0xProto.

The base font looked great until I tried rendering ASCII art with Block Elements and the glyphs just weren’t there. Here’s how I fixed it, and how you can do the same for any developer typeface.

$ whatis nerd-fonts

Nerd Fonts is an open source project that takes popular developer fonts and patches them with thousands of additional glyphs crucially the full Unicode Box Drawing and Block Elements ranges.

Three patched variants are available for every font:

For web ASCII art, NerdFontMono is the right pick. Every character, including the 32 Block Elements (U+2580–U+259F) from the original font and 128 Box Drawing characters (U+2500–U+257F), is rendered at exactly the same advance width as a regular letter. That’s what keeps art pixel-perfect in the browser.

$ cat ~/why-we-needed-this.md

The base 0xProto ships with full Box Drawing coverage but zero Block Elements I only discovered this gap when ASCII art on some fonts like ANSI Shadow–style started rendering broken in the browser (visually corrupted, yet copy-paste was correct).

A quick audit with fontTools made the problem obvious:

- Block Elements  (U+2580–U+259F):   0 / 32  glyphs present
+ Box Drawing     (U+2500–U+257F): 128 / 128  glyphs present

The NerdFontMono patch fills both ranges at a consistent 620-unit advance width, identical to the rest of 0xProto’s glyph metrics (upem 1000).
Swapping the font files fixed the rendering without touching a single line of CSS.

$ ls ~/download-options/

Nerd Fonts releases ship .ttf files only. Grab the Mono variant for the typeface you need:

0xProtoNerdFontMono-Regular.ttf
0xProtoNerdFontMono-Bold.ttf
0xProtoNerdFontMono-Italic.ttf

Individual font families are available at nerdfonts.com or directly from the GitHub releases.

Why not NerdFontPropo? Audit showed NerdFontPropo sets Block Element advance widths to 618 units vs 0xProto’s 620 (a 2-unit mismatch that causes visible column-drift in multi-line art). NerdFontMono enforces strict equality for all added glyphs.

$ convert ttf woff2

Nerd Fonts provides TTF only. For web serving, WOFF2 (TTF + Brotli compression) is the modern standard. Roughly 30% smaller than TTF and supported by 97%+ of browsers.

Start by installing the tooling:

pip install fonttools brotli

Then convert all three variants in one pass:

from fontTools.ttLib import TTFont
 
variants = [
    ("0xProtoNerdFontMono-Regular.ttf", "0xProto-Regular.woff2"),
    ("0xProtoNerdFontMono-Bold.ttf",    "0xProto-Bold.woff2"),
    ("0xProtoNerdFontMono-Italic.ttf",  "0xProto-Italic.woff2"),
]
 
for src, dst in variants:
    f = TTFont(src)
    f.flavor = "woff2"
    f.save(dst)
    print(f"✓ {dst}")

Lines 9–10 are all that matters: set flavor to "woff2" and save. No glyph data is altered, only the container format and compression change.

Serve both formats via @font-face. WOFF2 first, TTF as the fallback:

@font-face {
  font-family: "0xProto";
  src:
    url("/fonts/0xProto/0xProto-Regular.woff2") format("woff2"),
    url("/fonts/0xProto/0xProto-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

The browser picks the first format it can decode (effectively every modern browser takes woff2 and never touches the TTF fallback).

$ cat ~/LICENSE-notes.md

Both 0xProto and Nerd Fonts are released under the SIL Open Font License 1.1. The OFL explicitly permits:

• Format conversion (TTF → WOFF2)
• Redistribution bundled with a software project
• Modification, provided a different name is used for modified versions

That last point is already handled. Nerd Fonts renames the patched typeface (0xProto → 0xProto Nerd Font Mono), so the naming requirement is satisfied. Generating WOFF2 for your own web deployment is permitted without restriction.

What the OFL does not permit: selling the fonts as standalone products.

See also: Licensing & Disclaimer.

$ echo $TLDR

1. Audit your font for missing Unicode ranges before assuming a rendering bug is CSS. fontTools makes this trivial.
2. Use NerdFontMono for monospace web contexts; the default and Propo variants will cause alignment drift.
3. Convert TTF → WOFF2 with fonttools + brotli; serve both via @font-face for broad browser coverage.
4. OFL 1.1 permits this workflow freely. Format conversion is not a modification.