Noto Sansダウンロードのはなし

らら
らら

はじめに・・

Noto Sansをgoogleからダウンロードするたびに・・名称が変わって・・よくわからないから・・

調べてみた・・・

Noto Sansとは

世界中のコンピューターから表示されない文字をなくすために、AdobeがGoogleと共同開発したフォント

書体によって白い四角□マーク表示されることはtofu（豆腐）でno more tofu（ノー・モア・トーフ）でnotoだそうです。

Adobeでは、源ノ角ゴシックという名前...

世界中の言語が入っているので、Webでは、日本語のみに絞らないと厳しい・・・Noto Sans JPは違います..

しらべてみた。。

名称の種類Noto Sans Japanese、Noto Sans CJK JP、Noto Sans JP。。。

Noto Sans Japanese


https://fonts.google.com/earlyaccess#Noto+Sans+Japanese

CSS呼び出し方法


<link rel="stylesheet" href="fonts.googleapis.com/earlyaccess/notosansjapanese.css">

CSSの一部


@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}

otfファイルのサイズとファイル名　1つ約2M


2,358,412 NotoSansJP-Black.otf	900
2,256,108 NotoSansJP-Bold.otf	700
2,176,680 NotoSansJP-DemiLight.otf	600
2,172,484 NotoSansJP-Light.otf	300
2,187,728 NotoSansJP-Medium.otf	500
2,182,944 NotoSansJP-Regular.otf	400
2,097,776 NotoSansJP-Thin.otf	100

FontViewerPlusで中身を見てみた。。

notosan

FontViewerPlusとは、未インストールのフォントも閲覧できる、フォント閲覧ソフトウェアです。


http://marius.main.jp/software/

各国のASCIIコードは入っている状態で、漢字の部分は日本語のみ有効

反映が変わりやすいように、Boldで見ています。太字は対応文字です。

Noto Sans CJK JP

CJKは中国・日本・韓国が梱包されていることを示し、JPとあるものは、日本語が優先されるらしいです。

3言語分あるのでファイルサイズは大きいです。

現在は、google fontからダウンロードできないので

すでにダウンロード先がないので、下記からNoto Sans CJK JPのサブセットの中のsrcから見てみる


https://github.com/ixkaito/NotoSansJP-subset/

上記は、Noto Sans CJK JPから日本語のみ取り出したものです。

サブセットされた、subsetフォルダー内は、第1水準、第2水準、第3水準一部、NEC文字で常用漢字のみです。

すべて入っていないので注意が必要です。

NotoSansJP-subsetの中に、日本語だけ切り出す前の元ファイルがあるのでそちらで確認

srcフォルダー内

otfファイルのサイズとファイル名　1つ約16M


17,339,212 NotoSansCJKjp-Black.otf
16,998,140 NotoSansCJKjp-Bold.otf
16,368,004 NotoSansCJKjp-DemiLight.otf
16,244,028 NotoSansCJKjp-Light.otf
16,504,512 NotoSansCJKjp-Medium.otf
16,427,228 NotoSansCJKjp-Regular.otf
15,154,292 NotoSansCJKjp-Thin.otf

notosan

Noto Sans JP

現在は、表記がNoto Sans Japanese・・・・

DemiLight 600はなし・・

ダウンロード版とunicode-rangeで複数のフォントファイルで別々にCSS定義されたものがあり。これは、unicode-rangeで指定されたウェブページで使用している文字があるものだけ、読み込みされます。


https://fonts.google.com/noto/specimen/Noto+Sans+JP

otfファイルのサイズとファイル名　1つ約4M


4,896,876 NotoSansJP-Black.otf
4,691,408 NotoSansJP-Bold.otf
4,513,776 NotoSansJP-Light.otf
4,564,460 NotoSansJP-Medium.otf
4,548,208 NotoSansJP-Regular.otf
4,243,532 NotoSansJP-Thin.otf

上記のファイルがunicode-range毎にファイルが分割されている分、軽量？！

notosan

CSS呼び出し方法


<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">

CSSの一部

こちらはすべてのウェイトがすべて含まれています。


/* [0] */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6ofjtqLzI2JPCgQBnw7HFQoggPkENvl4B0ZLgOquiXidBa3qHiDcp2RQ.0.woff2) format('woff2');
  unicode-range: U+25ee8, U+25f23, U+25f5c, U+25fd4, U+25fe0, U+25ffb, U+2600c, U+26017, U+26060, U+260ed, U+26222, U+2626a, U+26270, U+26286, U+2634c, U+26402, U+2667e, U+266b0, U+2671d, U+268dd, U+268ea, U+26951, U+2696f, U+26999, U+269dd, U+26a1e, U+26a58, U+26a8c, U+26ab7, U+26aff, U+26c29, U+26c73, U+26c9e, U+26cdd, U+26e40, U+26e65, U+26f94, U+26ff6-26ff8, U+270f4, U+2710d, U+27139, U+273da-273db, U+273fe, U+27410, U+27449, U+27614-27615, U+27631, U+27684, U+27693, U+2770e, U+27723, U+27752, U+278b2, U+27985, U+279b4, U+27a84, U+27bb3, U+27bbe, U+27bc7, U+27c3c, U+27cb8, U+27d73, U+27da0, U+27e10, U+27eaf, U+27fb7, U+2808a, U+280bb, U+28277, U+28282, U+282f3, U+283cd, U+2840c, U+28455, U+284dc, U+2856b, U+285c8-285c9, U+286d7, U+286fa, U+28946, U+28949, U+2896b, U+28987-28988, U+289ba-289bb, U+28a1e, U+28a29, U+28a43, U+28a71, U+28a99, U+28acd, U+28add, U+28ae4, U+28bc1, U+28bef, U+28cdd, U+28d10, U+28d71, U+28dfb, U+28e0f, U+28e17, U+28e1f, U+28e36, U+28e89, U+28eeb, U+28ef6, U+28f32, U+28ff8, U+292a0, U+292b1, U+29490, U+295cf, U+2967f, U+296f0, U+29719, U+29750, U+29810, U+298c6, U+29a72, U+29d4b, U+29ddb, U+29e15, U+29e3d, U+29e49, U+29e8a, U+29ec4, U+29edb, U+29ee9, U+29fce, U+29fd7, U+2a01a, U+2a02f, U+2a082, U+2a0f9, U+2a190, U+2a2b2, U+2a38c, U+2a437, U+2a5f1, U+2a602, U+2a61a, U+2a6b2, U+2a9e6, U+2b746, U+2b751, U+2b753, U+2b75a, U+2b75c, U+2b765, U+2b776-2b777, U+2b77c, U+2b782, U+2b789, U+2b78b, U+2b78e, U+2b794, U+2b7ac, U+2b7af, U+2b7bd, U+2b7c9, U+2b7cf, U+2b7d2, U+2b7d8, U+2b7f0, U+2b80d, U+2b817, U+2b81a, U+2d544, U+2e278, U+2e569, U+2e6ea, U+2f804, U+2f80f, U+2f815, U+2f818, U+2f81a, U+2f822, U+2f828, U+2f82c, U+2f833, U+2f83f, U+2f846, U+2f852, U+2f862, U+2f86d, U+2f873, U+2f877, U+2f884, U+2f899-2f89a, U+2f8a6, U+2f8ac, U+2f8b2, U+2f8b6, U+2f8d3, U+2f8db-2f8dc, U+2f8e1, U+2f8e5, U+2f8ea, U+2f8ed, U+2f8fc, U+2f903, U+2f90b, U+2f90f, U+2f91a, U+2f920-2f921, U+2f945, U+2f947, U+2f96c, U+2f995, U+2f9d0, U+2f9de-2f9df, U+2f9f4;
}
/* [1] */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6ofjtqLzI2JPCgQBnw7HFQoggPkENvl4B0ZLgOquiXidBa3qHiDcp2RQ.1.woff2) format('woff2');
  unicode-range: U+1f235-1f23b, U+1f240-1f248, U+1f250-1f251, U+2000b, U+20089-2008a, U+200a2, U+200a4, U+200b0, U+200f5, U+20158, U+201a2, U+20213, U+2032b, U+20371, U+20381, U+203f9, U+2044a, U+20509, U+2053f, U+205b1, U+205d6, U+20611, U+20628, U+206ec, U+2074f, U+207c8, U+20807, U+2083a, U+208b9, U+2090e, U+2097c, U+20984, U+2099d, U+20a64, U+20ad3, U+20b1d, U+20b9f, U+20bb7, U+20d45, U+20d58, U+20de1, U+20e64, U+20e6d, U+20e95, U+20f5f, U+21201, U+2123d, U+21255, U+21274, U+2127b, U+212d7, U+212e4, U+212fd, U+2131b, U+21336, U+21344, U+213c4, U+2146d-2146e, U+215d7, U+21647, U+216b4, U+21706, U+21742, U+218bd, U+219c3, U+21a1a, U+21c56, U+21d2d, U+21d45, U+21d62, U+21d78, U+21d92, U+21d9c, U+21da1, U+21db7, U+21de0, U+21e33-21e34, U+21f1e, U+21f76, U+21ffa, U+2217b, U+22218, U+2231e, U+223ad, U+22609, U+226f3, U+2285b, U+228ab, U+2298f, U+22ab8, U+22b46, U+22b4f-22b50, U+22ba6, U+22c1d, U+22c24, U+22de1, U+22e42, U+22feb, U+231b6, U+231c3-231c4, U+231f5, U+23372, U+233cc, U+233d0, U+233d2-233d3, U+233d5, U+233da, U+233df, U+233e4, U+233fe, U+2344a-2344b, U+23451, U+23465, U+234e4, U+2355a, U+23594, U+235c4, U+23638-2363a, U+23647, U+2370c, U+2371c, U+2373f, U+23763-23764, U+237e7, U+237f1, U+237ff, U+23824, U+2383d, U+23a98, U+23c7f, U+23cbe, U+23cfe, U+23d00, U+23d0e, U+23d40, U+23dd3, U+23df9-23dfa, U+23f7e, U+2404b, U+24096, U+24103, U+241c6, U+241fe, U+242ee, U+243bc, U+243d0, U+24629, U+246a5, U+247f1, U+24896, U+248e9, U+24a4d, U+24b56, U+24b6f, U+24c16, U+24d14, U+24e04, U+24e0e, U+24e37, U+24e6a, U+24e8b, U+24ff2, U+2504a, U+25055, U+25122, U+251a9, U+251cd, U+251e5, U+2521e, U+2524c, U+2542e, U+2548e, U+254d9, U+2550e, U+255a7, U+2567f, U+25771, U+257a9, U+257b4, U+25874, U+259c4, U+259cc, U+259d4, U+25ad7, U+25ae3-25ae4, U+25af1, U+25bb2, U+25c4b, U+25c64, U+25da1, U+25e2e, U+25e56, U+25e62, U+25e65, U+25ec2, U+25ed8;
}

別の呼び出し Ver1

引数指定でウェイトなど指定でき、ブラウザー判定で適切なフォントを選択します。


<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100;300;400;500;700;900&display=" rel="stylesheet">
wght@はありません。

最近の・・Ver2

引数指定でウェイトなど指定でき、ブラウザー判定で適切なフォントを選択します。


<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=" rel="stylesheet">

これはウェイトはフルで読んでいます。

v1 v2で使える引数&text=

これは使用する文字だけ取り込めます。


<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100&display=swap&text=使用する文字" rel="stylesheet">

&subset=japaneseまれにこのオプション見ますが使用しているファイル名は変わりませんでした・・・Ver1、Ver2ともに

notosansjp.cssで呼び出す場合、すべてのウェイトがすべて呼び出しされますが、family=Noto+Sans+JPで呼び出しする場合では参照するファイルは同じでした。

wght@など、引数によって、ウェイトなどの呼び出しが可変してファイルサイズが異なります。

Ver1、Ver2の分割ファイル名は微妙に違います。。。

display=swapとすることで font-display: swap;をつけることができます。

フォントの拡張子


.ttf	TrueTypeフォント	otfと同様
.eot	Embedded OpenTypeフォント	IE6以降　IEのみ
.otf	OpenTypeフォント	IE6～8非対応	IE9からIE11*	ios4.2以降	andorid 2.2以降
.woff	Web Open Font Format	IE6～8非対応、IE9からIE11	ios5以降	andorid 4.4以降
.woff2	WOFF File Format 2.0	IE未対応	ios10以降	andorid105以降
.svg	IE6～8非対応、IE9からIE11*	ios3.2以降	andorid4.4以降
font-display:swap	IE非対応	ios11.3以降	andorid76
rel="preload"	IE非対応	ios11.3以降	andorid76	Firefox非対応

*は制限あり

下記をIE5-10まで呼び出しした場合下記が割り当てされました。

こちらの呼び出しはgoolge側でブラウザー判定してeot、woff2を判定してくれるようです。ver1 ver2で異なります・・


https://fonts.googleapis.com/css2?family=Noto+Sans+JP
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFYwQgL.eot);
}

IEではunicode-rangeが非対応のでダイレクトでwoff,eotが読み込みされます。

IE11で呼び出し


@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6ofjtqLzI2JPCgQBnw7HFQoggJ.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQaioq0Q.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFoxQ.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQMisq0Q.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQei0q0Q.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQQi8q0Q.woff) format('woff');
}

v1 v2での分割したフォントファイル、CSSは下記から落とせるようです。woff2のみです。


https://github.com/jfcherng/Noto-Sans-JP-CSS

分割された文字と分割番号の確認は下記から・・・できます。


http://ksk1015.github.io/google-fonts-subset-demo/

その他、自前サーバーへ置く場合、分割なし


https://google-webfonts-helper.herokuapp.com/fonts

サブセットとは

日常的によく使われる文字のみにして軽量化したもの

JIS第1水準漢字、JIS第2水準漢字の一部、ひらがな、カタカナ、記号、アルファベット

ファイル名とウェイト関係


FontName| CSS Font Weight
Thin	| 100
Light	| 300
Regular	| 400 (default)|
Medium	| 500
Bold	| 700
Black	| 900

フォントをJSで読み込み制御するやつ・・

https://github.com/typekit/webfontloader

例)https://github.com/jfcherng/Noto-Sans-JP-CSSここから落としたやつで・・


<script type="text/javascript" src="/common/js/webfontloader.js"></script>
<script>
WebFont.load({custom: {families: ['Noto+Sans+JP'],urls: ['/common/font/notosan/noto_sans_jp_light/css.css']}});
WebFont.load({custom: {families: ['Noto+Sans+JP'],urls: ['/common/font/notosan/noto_sans_jp_regular/css.css']}});
WebFont.load({custom: {families: ['Noto+Sans+JP'],urls: ['/common/font/notosan/noto_sans_jp_bold/css.css']}});
</script>

さいごに

Noto Sans Japaneseはearlyaccess(早期アクセス)版で日本語のみ、

Noto Sans CJK JPは中国・日本・韓国が梱包されているバージョン1ウェイト16Mもあるので日本語のみのサブセット版がgithubに多数あり。

現在ダウンロードできる。フォントファミリー名Noto Sans JP、は表記がNoto Sans Japaneseとなっており、日本語のみで

fonts.googleapis.com/cssの呼び出し方法で、ブラウザー判定でフォント拡張子が自動で判断され、使用しているページの文字のみフォントが読み込みされる・・

ただ、ページに使用される文字量にもよるが1ウェイトあたり、1秒はかかってしまいます・・・

あと、バージョンアップがされいるようで、最新を使用したほうが良さそうですね・・

Noto Sans JPからオリジナルのサブセットを使うのが良さそう・・・

関連記事