Add Cyrillic monospace fonts in Markdown editor #1937

New Issue

OVERLORD · 2026-02-05T02:15:34+03:00

OVERLORD commented

2026-02-05 02:15:34 +03:00

Originally created by @solus-hq on GitHub (Nov 11, 2020).

Describe the feature you'd like
Add Cyrillic monospace fonts in Markdown editor

Describe the benefits this feature would bring to BookStack users
Currently Cyrillic fonts are not monospace and look too small and hardly readable compared to latin ones.

Originally created by @solus-hq on GitHub (Nov 11, 2020). **Describe the feature you'd like** Add Cyrillic monospace fonts in Markdown editor **Describe the benefits this feature would bring to BookStack users** Currently Cyrillic fonts are not monospace and look too small and hardly readable compared to latin ones.

OVERLORD closed this issue

2026-02-05 02:15:36 +03:00

OVERLORD commented

2026-02-05 02:15:38 +03:00

@ssddanbrown commented on GitHub (Nov 13, 2020):

Hi @solus-hq,
Currently BookStack will look to use a range of potential system mono space fonts for its rendering, No fonts are included by BookStack itself for any of the web views. The default font set can be seen here: 4824ef2760/resources/sass/_variables.scss (L38)

This could be down to available fonts on your system or the fonts used by the browser. If wanted you can override the fonts used on your instance using the methods described in the documentation here:
https://www.bookstackapp.com/docs/admin/visual-customisation/#changing-fonts

@ssddanbrown commented on GitHub (Nov 13, 2020): Hi @solus-hq, Currently BookStack will look to use a range of potential system mono space fonts for its rendering, No fonts are included by BookStack itself for any of the web views. The default font set can be seen here: https://github.com/BookStackApp/BookStack/blob/4824ef2760564b738a36d48672d8ffa543087c30/resources/sass/_variables.scss#L38 This could be down to available fonts on your system or the fonts used by the browser. If wanted you can override the fonts used on your instance using the methods described in the documentation here: https://www.bookstackapp.com/docs/admin/visual-customisation/#changing-fonts

OVERLORD commented

2026-02-05 02:15:42 +03:00

@solus-hq commented on GitHub (Nov 20, 2020):

Thank you for you reply, I will look into changing my font set in this file!

@solus-hq commented on GitHub (Nov 20, 2020): Thank you for you reply, I will look into changing my font set in this file!

OVERLORD commented

2026-02-05 02:15:47 +03:00

@ssddanbrown commented on GitHub (Nov 20, 2020):

Okay, Will therefore close this but feel free to comment or create a new issue if you run into issues or something is not working when following that process.

@ssddanbrown commented on GitHub (Nov 20, 2020): Okay, Will therefore close this but feel free to comment or create a new issue if you run into issues or something is not working when following that process.

OVERLORD commented

2026-02-05 02:15:51 +03:00

@solus-hq commented on GitHub (Nov 24, 2020):

@ssddanbrown

Hello Dan!

Here's an update for this issue:

I edited _variables.scss file and set a monospace font available in my system

$mono: "JetBrains Mono", monospace;

Cleared Laravel application cache and route cache.

Here's a screenshot that something is still interfering with my choice of font:

@solus-hq commented on GitHub (Nov 24, 2020): @ssddanbrown Hello Dan! Here's an update for this issue: 1. I edited `_variables.scss` file and set a monospace font available in my system ``` $mono: "JetBrains Mono", monospace; ``` 2. Cleared Laravel application cache and route cache. Here's a screenshot that something is still interfering with my choice of font: <img width="1139" alt="Screenshot 2020-11-24 at 11 57 58" src="https://user-images.githubusercontent.com/26515805/100072151-ef2c9280-2e4c-11eb-84ba-f74309a7e46e.png">

OVERLORD commented

2026-02-05 02:15:57 +03:00

@ssddanbrown commented on GitHub (Nov 26, 2020):

Hi @solus-hq,
My referencing of _variables.scss was just to display what's used in the source code. While you can change that file you'd need to rebuild the styles using the development tooling. If you have not done that then the changes in that file won't have any affect.

The documentation way to change fonts is recommended as a way to change the fonts without needing to use any development tooling:
https://www.bookstackapp.com/docs/admin/visual-customisation/#changing-fonts

@ssddanbrown commented on GitHub (Nov 26, 2020): Hi @solus-hq, My referencing of `_variables.scss` was just to display what's used in the source code. While you can change that file you'd need to rebuild the styles using the development tooling. If you have not done that then the changes in that file won't have any affect. The documentation way to change fonts is recommended as a way to change the fonts without needing to use any development tooling: https://www.bookstackapp.com/docs/admin/visual-customisation/#changing-fonts

OVERLORD commented

2026-02-05 02:16:01 +03:00

@solus-hq commented on GitHub (Nov 26, 2020):

@ssddanbrown I'm very sorry to bother you once again, but I managed to reproduce everything in the example from the documentation link above, however it didn't help with Cyrillic symbols, something is broken with it... I just can't test it properly.

Here's the code I paste into custom CSS settings:

<style>
body, button, input, select, label, textarea {
  font-family: "Roboto", sans-serif;
}
.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
  font-family: "Roboto", monospace;
}
</style>

All these fonts are available locally in my system (macOS)

But as a result I still can't make it work with Cyrillic symbols and they keep looking different and are rendered using some other font.

Here's a screenshot:

While trying to manually tinker with page code using Chrome Dev Tools, I managed to make the Markdown editor input field look like I want. I changed font size and had to turn the font family: monospace property OFF to make it finally look appropriate but yet NOT monospace with Cyrillic font =)

Here's a screenshot:

@solus-hq commented on GitHub (Nov 26, 2020): @ssddanbrown I'm very sorry to bother you once again, but I managed to reproduce everything in the example from the documentation link above, however it didn't help with Cyrillic symbols, something is broken with it... I just can't test it properly. Here's the code I paste into custom CSS settings: ``` <style> body, button, input, select, label, textarea { font-family: "Roboto", sans-serif; } .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base { font-family: "Roboto", monospace; } </style> ``` All these fonts are available locally in my system (macOS) But as a result I still can't make it work with Cyrillic symbols and they keep looking different and are rendered using some other font. Here's a screenshot: <img width="781" alt="Screenshot 2020-11-26 at 19 18 26" src="https://user-images.githubusercontent.com/26515805/100374072-ca871500-301c-11eb-8741-c39bc6e6fc67.png"> While trying to manually tinker with page code using Chrome Dev Tools, I managed to make the Markdown editor input field look like I want. I changed font size and had to turn the `font family: monospace` property OFF to make it finally look appropriate but yet NOT monospace with Cyrillic font =) Here's a screenshot: <img width="1267" alt="Screenshot 2020-11-26 at 19 29 32" src="https://user-images.githubusercontent.com/26515805/100374872-f951bb00-301d-11eb-84b9-48d1edd37db9.png">

OVERLORD commented

2026-02-05 02:16:04 +03:00

@ssddanbrown commented on GitHub (Nov 27, 2020):

Hi @solus-hq,
Sorry, Looks like I had made a mistake in the documentation, the .Codemirror part should be .CodeMirror. I've updated the docs to reflect this now, that would be why your overrides were not taking affect.

Looks like by default it's using your system/chrome's monospace fault which looks bad at this certain size, hence it's likely falling back to the default sans-serif font when you are de-activating the style.

@ssddanbrown commented on GitHub (Nov 27, 2020): Hi @solus-hq, Sorry, Looks like I had made a mistake in the documentation, the `.Codemirror` part should be `.CodeMirror`. I've updated the docs to reflect this now, that would be why your overrides were not taking affect. Looks like by default it's using your system/chrome's monospace fault which looks bad at this certain size, hence it's likely falling back to the default sans-serif font when you are de-activating the style.

OVERLORD commented

2026-02-05 02:16:06 +03:00

@solus-hq commented on GitHub (Nov 27, 2020):

Hello @ssddanbrown

And finally it's now working with your help!

Thank you for this great application, it really helps us organise lots of markdown based knowledge.

@solus-hq commented on GitHub (Nov 27, 2020): Hello @ssddanbrown And finally it's now working with your help! Thank you for this great application, it really helps us organise lots of markdown based knowledge.

OVERLORD commented

2026-02-05 02:16:10 +03:00

@ssddanbrown commented on GitHub (Nov 28, 2020):

@solus-hq Awesome, Happy to hear that worked!

@ssddanbrown commented on GitHub (Nov 28, 2020): @solus-hq Awesome, Happy to hear that worked!

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1937