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

Product Support

AI-generated summary

In a discussion on meta.discourse.org titled “What font is used in meta.discourse.org editor?”, user haydenjames noticed the editor’s monospace font looked different and more appealing than the post preview font, and asked where to configure it. Arkshine identified the font as JetBrains Mono, part of the CSS variable --d-font-family--monospace, and shared that it’s also used elsewhere in the interface. haydenjames confirmed the font’s tech-friendly aesthetic and sought where to change it in Admin, eventually adding custom CSS and a Google Fonts link to enforce it globally. Arkshine clarified that CSS overrides are possible, offering targeted rules for the editor only. After haydenjames shared their working CSS and font link, Arkshine asked about their Discourse version, noting that haydenjames was running a build from March 27 — before JetBrains Mono was officially included on April 2. Arkshine advised that after rebuilding, haydenjames could remove all custom CSS and font links, as the font would be built-in. haydenjames confirmed they’d proceed. KhoiUSA chimed in, happy to learn the reason behind Meta’s improved font and praising the subtle but noticeable upgrade.

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

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

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.

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;
}
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.

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.

12

Thanks will do!

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.