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種類のウェイトが提供されていますが、日本語のウェブフォントはデータが重いので全部使用せずに、使用したいウェイトだけ読み込ませてください。

4. CSSでフォントファミリーを指定

コーダーさんでしたら、とても簡単。font-familyを下記のよう「font-family: ‘Noto Serif Japanese’, serif;」と指定すると適用されます。

Webデザインする際は?

ローカルにフォントデータをダウンロドしておくと、デザインデータを作成する際にも、もちろん通常のフォントと同様使用できます。Photoshop等でWebデザインを行う際は「Font Book」等のフォント管理ソフトで管理して、使用すると便利です。

Job Stageオリジナル書体見本帳

font-mihon-tyo-noto-serif

Job Stageオリジナル「Noto Serif Japanese」の「書体見本帳」を作りました。フォントサイズは「10px〜32px」。Webデザイナーの方は是非、お仕事にお役立てください。こちらからご覧にれます。

Noto Fontsとは?

Google社から提供されている、多言語対応でクオリティの高い、無料で使用できるWebフォント「Noto Fonts」。ゴシック体は「Noto Sans Japanese」、明朝体は「Noto Serif Japanese」という名前で提供されています。


公開日:2017/06/12