Fixing miss-aligned monospace text in Android browsers
4 days ago
- ASCII diagrams in <pre> tags misalign on Android due to system monospace font fallback.
- Web fonts from Google Fonts may be trimmed down, missing some glyphs and causing fallback.
- Using the full .ttf version of Noto Sans Mono served locally fixes the alignment issue.
- CSS snippet: @font-face with .ttf and pre { font-family: 'Noto Sans Mono'; } resolves the problem.