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

Support

AI-generated summary

The discussion revolves around customizing Discourse to use Noto Sans for posts and Noto Sans UI for the user interface. ljpp is experimenting with Google’s Noto fonts and wants to use Noto Sans for posts due to its readability, while using Noto Sans UI for the UI due to its smaller horizontal footprint. riking suggests that this can be achieved through CSS customizations. ljpp shares their current global implementation of Noto Sans and seeks guidance on how to modify it to use Noto Sans UI for the UI. awesomerobot provides a code example for changing the font of posts to a custom font, suggesting the use of the following SCSS code:

.topic-body .cooked,
.d-editor-container  {
  font-family: "Noto Sans";
}

This code targets the post content and composer/preview areas, and can be modified to use Noto Sans UI for the UI elements.

1

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?

2

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

3

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

HEAD:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,500,700" rel="stylesheet">

CSS:

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?

5

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