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


(ljpp) #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?


(Kane York) #2

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


(ljpp) #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?