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

Support
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?

1 Like
2

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

3 Likes
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";
}
6 Likes