Understanding Noto Serif

[napa-web-designer]

I am a web designer of 10 years. I am not an expert in Typography but love it and do my best with it in my work.

I had a few related questions and am trying to track down someone who might answer it.

I ran across the Google Noto font and wanted to use Noto Serif on a site. On this page https://www.google.com/get/noto/#serif-lgc is shows that Noto Serif has 72 styles including under Normal: Thin, Astra Light, Light, Regular, Medium, Bold, SemiBold, EstraBold and all of the Italic versions of those. However when I want to use on it on a site via Google Fonts it only has Regular and Bold and its italic versions: https://fonts.google.com/specimen/Noto+Serif.

So that is confusing. I want more than just Normal and Bold. That if my first confusion.

Second, I see that on this page that Google Fonts offers a few Noto Serif options (Noto Serif KR, JP, etc.) https://fonts.google.com/?query=noto+serif and all of them other than just the simple Noto Serif have more styles - so that is great - but - when I went to look at what these were, what was different about them, as best as I can understand the extra letters in the name refer to different languages (Japanese, Traditional Chinese, etc.). I don’t need these and am concerned about the file size of these fonts. Back on this page which looks to present all of the Noto vexations, it does not have Noto Serif TC for example but does have Noto Serif CJK TC which is 130.5 MB.

It used to be that I could find the files size of fonts on Google Fonts but the interface of the site does not seem to have these anymore. Have they removed that?

In the end, if I want a light weight version of Noto Serif for English primarily, with all of the light, medium, Regular, Bold, etc. styles - what do I use?

Anyways, if you know who can answer these or where I might look to get answers, I would love help in being directed there. And you can answer them, well of course that is faster and easier.

Thanks so much,

David

[m4rc1e]

We serve a rather old version of Noto which is quite different to the newer releases. Since we don't have a versioned api, I'm apprehensive to push the newest, since it will cause regressions for existing users. In the past, we've pushed major changes and the fallout has been quite spectacular, #1307.

In your situation, I'd use https://fonts.google.com/specimen/Noto+Serif+TC, or a version of Noto Serif which has 7 styles. Don't worry about the additional characters in these fonts, the endpoint serves many different subsetted versions of the base font, https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap. The browser should choose which subset to use, based on the content of the page. The smallest subsetted Regular woff2 font is ~15kb.

Here's a jsbin using Noto Serif TC, https://jsbin.com/wurubidoda/edit?output. Inspecting the source tells me that each font is around ~35kb.

[napa-web-designer]

You are awesome! Thanks so much for the response, that was helpful. So I had built the site with Noto Serif and wanted the thinner style only in one place so far on the site. I tried changing the font on the whole site to Noto Serif TC but realized that the the English characters for Noto Serif and Noto Serif TC are very different. I am guessing that is what you meant by being careful in pushing changes because if you updated Noto Serif and it ended up being like Noto Serif TC for example, that would cause some complaints from people. Anyways, thanks again so much for responding.

[ytxmobile98]

You are awesome! Thanks so much for the response, that was helpful. So I had built the site with Noto Serif and wanted the thinner style only in one place so far on the site. I tried changing the font on the whole site to Noto Serif TC but realized that the the English characters for Noto Serif and Noto Serif TC are very different. I am guessing that is what you meant by being careful in pushing changes because if you updated Noto Serif and it ended up being like Noto Serif TC for example, that would cause some complaints from people. Anyways, thanks again so much for responding.

One solution could be to download the fonts you want from https://bitly.com/get-noto and then write the @font-face rules on your own.

[tamcy]

@napa-web-designer The reason the Latin glyphs in Noto Serif TC are very different from Noto Serif is because Noto Serif CJK (Noto Serif TC included) is just a rebranded version of Adobe's Source Han Serif, which LGC glyphs are from Adobe's Source Serif Pro, not Google's Noto Serif.

[missmatsuko]

Would it be possible to publish another Noto Serif to Google Fonts with the version number appended to the name? It's unfortunate that we can't use the other weights of it directly from Google Fonts.

[ytxmobile98]

Would it be possible to publish another Noto Serif to Google Fonts with the version number appended to the name? It's unfortunate that we can't use the other weights of it directly from Google Fonts.

One workaround would be to download the fonts and write your own @font-face CSS rules by specifying your custom font directories. There are various approaches in case you have a large number of such rules to generate, e.g. using Python to create CSS files.

[thlinard]

Adobe provides the 72 styles here:
https://fonts.adobe.com/fonts/noto-serif

[thlinard]

Duplicate of #398?

[omorhefere]

https://fonts.adobe.com/fonts/noto-serif

We serve a rather old version of Noto which is quite different to the newer releases. Since we don't have a versioned api, I'm apprehensive to push the newest, since it will cause regressions for existing users. In the past, we've pushed major changes and the fallout has been quite spectacular, #1307.

In your situation, I'd use https://fonts.google.com/specimen/Noto+Serif+TC, or a version of Noto Serif which has 7 styles. Don't worry about the additional characters in these fonts, the endpoint serves many different subsetted versions of the base font, https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap. The browser should choose which subset to use, based on the content of the page. The smallest subsetted Regular woff2 font is ~15kb.

Here's a jsbin using Noto Serif TC, https://jsbin.com/wurubidoda/edit?output. Inspecting the source tells me that each font is around ~35kb.

Hey, just following up to this. I'm currently trying to download the Noto serif kr font face (regular 400) to use in my web project from here: https://fonts.google.com/noto/specimen/Noto+Serif+KR. Its ~7mb which is huge, i convert it from TTF to WOFF2 and it comes down to ~2mb.

From what you've said here, loading the font from this url https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap allows you to get smaller subsetted version of the base font. is there anyway you can download these? or is the best option for small font files to use this: https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap