Monospace font customization #4307

Describe the Bug

It seems changing the font family name monospace to other Monospace Font from Google in the following customization css code piece won't affect the display of code block. It only takes effect on the in-line code font display.

.CodeMirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
  font-family: monospace;
}

Steps to Reproduce

1. Go to Settings ---> Customization ---> Custom HTML Head Content

2. Add the link of certain monospace font (e.g. Red Hat Mono) as shown in https://www.bookstackapp.com/docs/admin/visual-customisation/ from Google Fonts.

3. Add the application-of-the-linked-font piece of css code as shown in https://www.bookstackapp.com/docs/admin/visual-customisation/ as below, and then save the settings.

.CodeMirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
  font-family: "Red Hat Mono";
}

4. Go to certain page including in-line code and

code-block

the in-line code part displays using the customized font (Red Hat Mono) but the code-block still uses the default monospace font set by the browser. (ACTUALLY when refreshing the page, you can see the code-block is using the customized font for about 0.1 second and then changed to the default monospace font set by the browser eventually)

5. Edit this page with Markdown Editor, and you can see ALL contents in the LEFT part (Editor) uses the default monospace font set by the browser, while in the RIGHT part (Preview), both the code block and in-line code display using the customized font as expected.

Latest Firefox and MS-Edge show the same behavior as described above.

Expected Behaviour

Both in-line code and

code block

use the customized mono font.

Screenshots or Additional Context

No response

Browser Details

No response

Exact BookStack Version

v23.05.2

PHP Version

8.2

Hosting Environment

Debian 12 + NGINX 1.22.1 + PHP 8.2 + MariaDB 10.11.3