Font in docs does not allow box drawing characters to align properly

[ollien]

The following docs comment does not render with the lines aligned on the docs page

  /// ```text
  /// ┌─────────┬──────────────┐
  /// │         │ Output       │
  /// ├─────────┼──────────────┤
  /// │ Stage 1 │ Wibble       │
  /// │ Stage 2 │ Wobble       │
  /// │ Stage 3 │ WibbleWobble │
  /// └─────────┴──────────────┘
  /// ```

This renders as

I think this is an issue with the Ubuntu Mono font used, as if I remove it from the font-family list in my browser, it renders without issue.

[ollien]

I was able to work around this by specifying the font manually in my comment

  /// <pre><code style="font-family: monospace;" class="language-plaintext">┌─────────┬──────────────┐
  /// │         │ Output       │
  /// ├─────────┼──────────────┤
  /// │ Stage 1 │ Wibble       │
  /// │ Stage 2 │ Wobble       │
  /// │ Stage 3 │ WibbleWobble │
  /// └─────────┴──────────────┘</code></pre>

[lpil]

Oh strange! Why does it not align correctly? The font is monospace, right?

[joshi-monster]

Ubuntu Mono would support box drawing characters:

(rendered in Firefox on Linux, using Ubuntu Mono downloaded as a zip from Google Fonts).

the @font-face we use in the docs index.css however specifies specific character ranges to split the font into multiple @font-face definitions (for cyrillic, greek, latin.) None of those ranges include the box drawing characters, so the browser falls back to a different font for them (for me this would be Liberation Mono).

[inoas-nbw]

It does so to reduce size (the font is shipped for every generate docs), but we could include the ranges

[lpil]

Do we want to include those? What would the size cost?

We could also use the system monospace font instead of a custom one.