How to use Noto Sans for posts but Sans UI for everything else?

I have been trialing with the Google Noto fonts. The Noto Sans is quite pleasant for longer posts, as it has a bit more horizontal spacing/width. I looks fantastic on deviced with high DPI, such as modern mobile phones and larger devices with a very high resolution.

The width of Noto Sans may cause some issues with the UI of Discourse, such as the burger menu. The Noto font package includes a Noto Sans UI version of the font, with a smaller horizontal footprint. This makes me wonder how to customize Discourse so that:

  • The posts are using font Noto Sans
  • All of the UI are in Noto Sans UI

This could be visually nice, or what say you?

1 Like

You can do this with only CSS customizations. Not too hard.


Hm…on one instance I currently use Noto Sans globally:


<link href=",500,700" rel="stylesheet">


html {
    font-family: "Noto Sans", sans-serif;
body input, body button, body select, body textarea {
    font-family: "Noto Sans", Helvetica, Arial, sans-serif;

But since my HTML skills are from the 90’s, I am a bit unsure where to go from here. Has anyone patched anything similar and could share an example?

If you want to change the font of posts, this would do it. Note that I’m also changing the font of the composer and preview (with .d-editor-container) to match:

.topic-body .cooked,
.d-editor-container  {
  font-family: "your font here";