今年4月、「Google Fonts」に明朝体の書体「Noto Serif CJK」が発表されましたので、遅ればせながら使ってみました。
［参照］
・Google Developers Japan: Noto Serif CJK が登場
https://developers-jp.googleblog.com/2017/04/noto-serif-cjk-is-here.html
・源ノ明朝 - Adobe
https://source.typekit.com/source-han-serif/jp/
設定方法
（1）選別
今回は日本語のみを使用するため、「Noto Serif CJK JP」を選択します。
https://www.google.com/get/noto/#serif-jpan
日本語は文字量が膨大なためデータがとても重いこと（1ウェイト平均 23MB）、全ウェイトを使用する機会は少ないと考えられることから、必要なウェイトだけを選別します。
今回は「Regular 400」と、「Bold 700」の 2種類を使用します。
（2）ダウンロード
通常のファイルでは重すぎるので、一般的に使わない文字や記号などを削除し「サブセット化」されたファイルを使用します。（1ウェイト平均 6MB）
「Noto CJK」詳細ページ最下部にある Adobe が作成した推奨環境のフローチャート「Recommended use」を参考に、一番軽い「Region-specific Subset OpenType/CFF (Subset OTF)」から、日本語用データ「NotoSansJP-[weight].otf」をダウンロードします。
https://www.google.com/get/noto/help/cjk/
（3）変換
「.otf」から、一般的な環境で動作する「.woff」に変換します。
なお、「.woff」は Android 4.4 以降対応なので、それ以前のバージョンにも対応させたい場合は「.ttf」にも変換してください。
※以下のサイトで変換。（1ウェイト平均 7KB）
・fontconverter.org
http://www.fontconverter.org/
※上記サイトでうまくいかなかった場合は、以下のソフトで変換してください。（1ウェイト平均 5MB）
武蔵システム「WOFFコンバータ」
https://opentype.jp/woffconv.htm
（4）CSSを記述
ダウンロードしたフォントデータを「fonts」フォルダへ格納し、CSSを記述。
/* 一般的な書き方（Android 4.4以降対応） */
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url('fonts/NotoSerifJP/NotoSerifJP-Regular.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 700;
src: url('fonts/NotoSerifJP/NotoSerifJP-Bold.woff') format('woff');
font-display: swap;
}
body {
font-family: 'Noto Serif Japanese', serif, sans-serif;
}
/* Android 4.3 までのバージョンにも対応する場合 */
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url('fonts/NotoSerifJP/NotoSerifJP-Regular.woff') format('woff'),
url('fonts/NotoSerifJP/NotoSerifJP-Black.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 700;
src: url('fonts/NotoSerifJP/NotoSerifJP-Bold.woff') format('woff'),
url('fonts/NotoSerifJP/NotoSerifJP-Black.ttf') format('truetype');
font-display: swap;
}
body {
font-family: 'Noto Serif Japanese', serif, sans-serif;
}
（注意）
「font-display: swap;」は、Chrome 60、Opera 47 から正式に採用されるプロパティです。
通常、Webフォントの読み込みが終わるまでの数秒間は文字が表示されませんが、このプロパティを使うと、すぐに「デフォルトのフォント」で表示され、読み込みが終わり次第「Webフォント」で表示されます。
今までは JavaScript などで対応していた方法ですが、CSS のみでできるようになります。
まだ対応ブラウザが少ないのですが、今回は実験的に使用しました。
［参照］
・[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス
http://coliss.com/articles/build-websites/operation/css/about-font-display.html
・font-display | Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=font-display
（5）テスト結果（※イメージ）
デモ
【「Noto Serif」表示例（例文）】
- 例文
- 数字、アルファベット（大文字・小文字）、記号
- 「JIS第2水準」の漢字を含む単語
（以前「Google Fonts+ 日本語 早期アクセス」の表示テストでも使った例文） - ※保険として、「serif」「sans-serif」も設定しています。
（ほとんどの Android には serif系の書体が入っていないため）
デモページ
【「Noto Serif」表示例（全 7 Weight）】
- ExtraLight 200
- Light 300
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
- Black 900
デモページ
【「Noto Serif」表示例（選別 2 Weight）】
- Regular 400
- Bold 700
デモページ
まとめ
- PCはもちろん、タブレットやスマホでも美しい「Noto Serif」が表示できる。
- 特にタブレットやスマホでは通信環境の問題もあり、表示されるまでに時間がかかるため、全文で使うには厳しい。
- まだ対応ブラウザは少ないが、フォント表示を快適にできる「font-display」プロパティもある。今後の実装に期待。
［参照］
・2016.11.28「Google Fonts+ 日本語 早期アクセス」を使ってみる
https://www.tam-tam.co.jp/tipsnote/html_css/post11498.html
・2016.03.30「Webフォントを使ってみる(2016年版)」Tips Note
https://www.tam-tam.co.jp/tipsnote/html_css/post8573.html