Move font from Nunito to Noto Sans for character set compatibility

[jancborchardt]

Noto Sans is very similar to Open Sans which we used before – and still use on business cards, website and all promo material because we never switched as Nunito didn’t look good for that.

Additionally, Noto Sans supports a lot more character sets. Which is important for our global userbase and goal of being an alternative for everyone.

The detailed reasons for the switch are:

Nunito drawbacks:

• Nunito misses a lot of character sets, which we have received a lot of issues about since the switch – hence the "regression" label:
  • Cyrillic: Heterogeneous fonts in the whole interface #13377
  • Korean: Characters from Korean, Chinese, etc don’t show in txt/md file previews #4198
  • Chinese: hope to add Chinese Font. #11640 (thanks very much to @chiyi4488 for recommending Noto Sans CJK!)
• Nunito doesn’t look serious enough on our business cards, which is why we kept using Open Sans there.
• Same with the website, we never switched.
• Same with the promotional material, flyers and especially whitepapers. Nunito just looks too playful.

Noto Sans advantages:

• Noto Sans "aims to support all languages with a harmonious look and feel." It really is very comprehensive: https://www.google.com/get/noto/ – and it aligns with our goal of being an alternative for everyone.
• It is based on Open Sans which we used before and still use on website, business cards and promo materials. With the exception of the web interface, nothing used Nunito for long (we even had backlash on Android for using something else than native).
• There’s even Noto Mono so source code parts look nice as well. :)
• It looks very normal/unassuming, which is great for document collaboration without distraction and easy readability. Compare Nunito and Noto Sans – at small sizes Noto is more open and readable, and in headings Nunito just doesn’t look serious (which again is why we actively did not use it for business cards or promo material):
  
  

Note that this pull request first starts with adding a base of the acharacter sets like Latin, Cyrillic, Vietnamese, Greek and Devanagari – the same you would get when embedding Noto Sans via Google Fonts.
Korean/Hangul, Chinese and others we will do in a follow-up pull request.

Please review @nextcloud/designers @chiyi4488 @R0maNNN @KekcuHa @kesselb @hbqclh @HuidaeCho and cc @jospoortvliet FYI regarding the screenshots for the release. 🎉

[chiyi4488]

Chinese: #11640 (thanks very much to @chiyi4488 for recommending Noto Sans!)

:)),but not Noto Sans, it Noto Sans TC. (TC=Traditional Chinese)

[jancborchardt]

The plan for Simplified Chinese, Traditional Chinese, Japanese, and Korean is the following:

• Noto Sans CJK has all 4 of the character sets, even in the files coded SC, TC, JP, KR – each file set has all the character sets.
• I would go through the Google Fonts @font-face file and "simply" download all these 184 (!) separate woff files, rename them to the appropriate NotoSans-Regular-CJK-0.woff2, NotoSans-Bold-CJK-84.woff2 etc.
• And of course load them correctly in the fonts.scss file
• Would do it in a separate pull request as said, since this might take longer or I need to figure out how to automate. ;) And it will need more testing.

Does that sounds like it make sense – before I start doing that? :D @skjnldsv @chiyi4488 @HuidaeCho

[jancborchardt]

@skjnldsv addressed your comments and fixed the erroneous commit of the loading colors. :) The Drone failures seem unrelated?

Anything else? :)

Resolved, new review please :)

[skjnldsv]

• 184 (!) separate woff files

😱

[skjnldsv]

Cannot really test all foreign glyphs, but it looks good 👍 🚀

[chiyi4488]

I will test it recently. How can I get this change?

[jancborchardt]

@chiyi4488 are you familiar with git? You then could clone the repositiry and check out this branch.

But note that we don't have the Noto Sans CJK in here yet, I will add that in a follow-up pull request. :)

[jancborchardt]

We could also additionally test how Source Sans Pro looks:
https://fonts.google.com/specimen/Source+Sans+Pro

As the Chinese-Japanese-Korean character sets are a collab between Noto (Google) and Source (Adobe) they will look good for both.

However, if we use Source Sans Pro in the web interface, then we should do so too on the website, business cards and promo material. (It's not a bit change though as the fonts are very similar anyway.)

[jancborchardt]

Another possibility, because on Android and iOS we also use the native fonts rather than some custom font:
Maybe we don’t use a webfont at all but rather a system font stack. This will lead to slightly improved performance, and it looks native everywhere.

We could use e.g.:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

EDIT: Seems that Github, Medium and Wordpress do this since some time already: https://css-tricks.com/snippets/css/system-font-stack/#article-header-id-1

[chiyi4488]

We could also additionally test how Source Sans Pro looks:
https://fonts.google.com/specimen/Source+Sans+Pro
As the Chinese-Japanese-Korean character sets are a collab between Noto (Google) and Source (Adobe) they will look good for both.
However, if we use Source Sans Pro in the web interface, then we should do so too on the website, business cards and promo material. (It's not a bit change though as the fonts are very similar anyway.)

I don't know what you mean.

[chiyi4488]

I can't see any style preview(chinese

[jancborchardt]

@chiyi4488 as said, CJK is not in this pull request. :)

[jancborchardt]

Pull request for using a native font stack in the web interface at #16055 – please test and review. :)

[joshtrichards]

Re-opened #4198 because as far as I can tell CJK support was never added for MD/TXT previews/thumbnails. Looks like we'd have to bundle additional Noto woff2 files plus maybe build some logic into the MD/TXT preview generator.