Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Monospace font customization #4307

Closed
wxrl opened this issue Jun 15, 2023 · 1 comment
Closed

Monospace font customization #4307

wxrl opened this issue Jun 15, 2023 · 1 comment
Labels
Milestone

Comments

@wxrl
Copy link

wxrl commented Jun 15, 2023

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";
}
  1. 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)

  1. 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

@wxrl wxrl added the 🐛 Bug label Jun 15, 2023
@ssddanbrown ssddanbrown added this to the Next Feature Release milestone Jun 15, 2023
@ssddanbrown
Copy link
Member

ssddanbrown commented Jun 15, 2023

Thanks for raising @wxrl. I specifically addressed this within 610ad0d yesterday, as part of #4302 which will change how custom fonts are defined. These will be part of the next feature release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

2 participants