What font is used in meta.discourse.org editor?

Support
1

I notice the font is differn’t from the post/preview font. Really nice! Where is this setting?

The image shows a support ticket inquiry about grouping restrictions in a software system, asking if changing certain settings would affect group browsing features like searching for members by '@'. (Captioned by AI)
The image shows a support ticket inquiry about grouping restrictions in a software system, asking if changing certain settings would affect group browsing features like searching for members by '@'. (Captioned by AI)941×238 29 KB

Seems to be this:
image

Only related setting I found were for the general fonts:

The image displays a WordPress "Font style" customization page where users can select font styles, including a base font and a heading font, for their site, with options to reset or apply the changes. (Captioned by AI)
The image displays a WordPress "Font style" customization page where users can select font styles, including a base font and a heading font, for their site, with options to reset or apply the changes. (Captioned by AI)1196×598 22.3 KB

Thanks

2 Likes
3

You can click on “–d-font-family–monospace” in your screenshot.
It shows:

--d-font-family--monospace: JetBrains Mono, Consolas, Monaco, monospace;

It’s using JetBrains Mono, it’s great font

Related to Monospace font in the Markdown-only editor - #14 by sam.

4 Likes
4

It’s beautiful! :smiling_face_with_sunglasses: And fits the tech niche well in my case, as it looks a lot like a terminal font.

I am not sure if I missed it in the answer, but where in Admin do I set this for the editor?

Edit, it think I’m finding it: Change the default font on your site

Will edit once I do.

2 Likes
5

You can overwrite with CSS, for example:

body {
    --d-font-family--monospace: consolas;
}

Note that this variable is not only used in the editor.

If you want to target only the editor:

.d-editor .d-editor-input {
  font-family: consolas;
}
1 Like
6

Thanks. I did get it by adding this to my global header:

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

And this to global CSS:

:root {
  --d-font-family--monospace: "JetBrains Mono", Consolas, Monaco, monospace;
}

code,
pre,
.hljs,
.cooked code,
.d-editor-input,
.d-editor-preview code,
.d-editor-preview pre,
.markdown code,
blockquote code,
pre code {
  font-family: "JetBrains Mono", Consolas, Monaco, monospace !important;
}
7

What discourse version are you using?

8

image
image247×229 7.88 KB

9

The next time you rebuild, you won’t need this CSS.
The font was introduced on April 2nd, and your build date is March 27.

1 Like
10

So I can rebuild now and remove the entire block of CSS I pasted above?

What about the Google font?:

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
11

Yes, you don’t need any additions.

1 Like
12

Thanks will do!

1 Like
13

I was wondering why the font on Meta looked better than my own site, and now I know why! :laughing:

Glad to see this new font update, subtle change but looks great.

3 Likes