All Docs
FeaturesMaking Tax DigitalUpdated March 9, 2026

PERF-03: Fixing Monospace Font Rendering for Financial Data

PERF-03: Fixing Monospace Font Rendering for Financial Data

Version: 1.0.334 Category: Frontend Performance

Overview

This release resolves a font configuration issue that caused monospace text — including HMRC submission IDs, National Insurance numbers, and code blocks — to render using Montserrat, a proportional sans-serif typeface. Monospace text is now rendered with an appropriate fixed-width font.

Background

The application uses CSS custom properties to manage its type system. The global stylesheet (src/app/globals.css) previously contained:

--font-mono: var(--font-montserrat);

Because Montserrat is already loaded for the application's main UI, this mapping did not introduce any extra network requests or load-time penalty. However, it did mean that anywhere the --font-mono variable was consumed — code blocks, preformatted text, and any component explicitly styled for fixed-width display — Montserrat would be used instead of a genuine monospace face.

Impact on Users

Legibility of Reference Data

For a Making Tax Digital compliance platform, precise reading of reference codes is important. Values such as:

  • Submission IDs (e.g. XMTD00000123456)
  • National Insurance numbers (e.g. AB 12 34 56 C)
  • Unique Taxpayer References (e.g. 1234567890)

…benefit significantly from monospace rendering. In a fixed-width font, every character occupies the same horizontal space, making it straightforward to compare, copy, and verify codes character-by-character. In a proportional font like Montserrat, characters cluster unevenly, increasing the chance of misreading.

Code Blocks and API Output

Any pre-formatted content displayed in the application — such as JSON payloads or HMRC API responses shown in the submission audit trail — should render in a monospace font by convention and for readability.

The Fix

The --font-mono override in globals.css has been corrected. Two valid approaches are supported:

Option A: Dedicated Monospace Font (JetBrains Mono)

Import JetBrains Mono from Google Fonts using Next.js's built-in font optimisation:

// src/app/layout.tsx
import { JetBrains_Mono } from 'next/font/google';

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

Then apply the variable to the document root and update globals.css:

/* globals.css */
--font-mono: var(--font-jetbrains-mono);

This gives the application a consistent, purpose-designed monospace face across all environments.

Option B: System Monospace Stack

Remove the --font-mono override entirely. The browser will then fall back to its native monospace stack:

ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

This approach requires no additional font loading and will look native on each operating system.

Affected File

src/app/globals.css

Summary

BeforeAfter
--font-mono: var(--font-montserrat)Monospace variable maps to a true fixed-width font or system stack
Financial codes render in proportional MontserratFinancial codes render in fixed-width characters
No additional network cost, but poor legibilityCorrect rendering with no legibility issues