I've recently tried to render some ASCII diagrams like the one below in a <pre> tag in HTML. While it looked fine in Neovim and in the MacOS and iOS browsers, I've noticed that on Android the boxes were slightly misaligned.

     │
┌────▼─────┐
│  Phase 1 │
└────┬─────┘
     │
┌────▼─────┐
│  Phase 2 │
└────┬─────┘
     │
     ▼     

Original: the diagram above should not align on Android devices

     │
┌────▼─────┐
│  Phase 1 │
└────┬─────┘
     │
┌────▼─────┐
│  Phase 2 │
└────┬─────┘
     │
     ▼     

Fixed: the diagram above should correctly align on Android devices

A Google search showed that this seems to be a common problem, but no solutions was immediately obvious. ChatGPT wasn't able to fix the issue, but it at least pointed in the right direction: Even with a webfont loaded, the browser is most likely falling back to a system monospace font for glyphs that are not available in the (web)font. And for some reason the monospaced system font on Android has a different width, resulting in the misalignment.

Some google searches and multiple different LLMs suggested to load the Noto Sans Mono from Google fonts. This font would have no missing glyphs (at least for the box-drawing glyphs) and so no fallback should occur. However, after embedding the webfont via a simple <link> tag, the miss-alignment persisted. Various others suggested CSS hacks did not fix the problem either. I was about to give up, but then found the discussion on the mkdocs org which mentioned that the file size of the WOFF2 version of Noto Sans Mono is noticeable smaller than the TTF version since many symbols were missing.

Turns out that the font served from Google fongts via <link> is a most likely a trimmed down version. After downloading the .ttf itself and serving it myself, the alignment issue was gone.

Relevant CSS snippet to embed a .ttf directly in CSS:

@font-face {
  font-family: "Noto Sans Mono";
  src: url("/path/to/your.ttf");
}

pre {
    font-family: "Noto Sans Mono"
}