Google Fontsの日本語Webフォント「Noto Serif Japanese」の設定方法

noto-serif-japanese

先日、Googleから待望の日本語ウェブフォント、明朝体「Noto Serif Japanese」が配信が始まりました。意外とWebフォントの読み込み方法、CSSの設定方法が複雑ですので、日本語Webフォント「Noto Serif Japanese」の設定方法を下記にまとめてみました。Webデザイナーさん、コーダーさん是非、参考にしてみてください。

1. Noto Serif CJK JPのダウンロード

最初にGoogle Fontsのサイトから、フォントデータをダウンロードします。
Google Font下記URlより「Japanese」と検索すると下記の2種類が検索結果に表示されます。

ゴシックの「Noto Sans CJK JP」
明朝体の「Noto Serif CJK JP」

今回使用するのは明朝体の「Noto Serif Japanese」ですので、「Noto Serif CJK JP」をダウンロードします。

http://www.google.com/get/noto/

2. フォントデータをサーバーにアップロード

先程ダウンロードしたフォントデータをサーバーにアップロードします。ディレクトリは適時、都合のいい場所にアップしてください。

3. CSSでフォントの読み込みを指定

現在（2017年6月12日）、GoogleからCDN提供されていないので（Noneto Sansは提供中）、現状はサーバーにフォントデータをアップロードして、下記のようにCSSでfont-faceでファイルを指定して使用します。現在7種類のウェイトが提供されていますが、日本語のウェブフォントはデータが重いので全部使用せずに、使用したいウェイトだけ読み込ませてください。

@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 100;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 200;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 400;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 500;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 600;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 700;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format(‘opentype’);
}
@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 900;
src: url(fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format(‘opentype’);
}