Cntlog > スキルアップ・ノウハウ > デザイン > 【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方

【サンプル有】日本語の明朝体で使えるWebフォント Noto Serifの使い方

4/10はなんの日かご存知ですか?
そう、フォントの日です。

本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。

とりあえず見たい方はデモを用意しているのでそちらをご覧ください。

Noto Serif CJKのデモ

Noto Serif CJKとは

「Noto Serif CJK」は、Google社とAdobe社共同開発されたセリフ書体です。。
2014年にリリースされた「Noto Sans CJK」フォントの兄弟フォントです。
「Noto Sans CJK」がセリフなしのゴシック体であるのに対し、「Noto Serif CJK」明朝体になっています。

これまで無料で使える明朝体で使えるWebフォントはなかったので、コーディングがぐっとやりやすくなるのが期待されます。

なお、「Noto Serif CJK」は縦書きレイアウトにも対応しています。

詳しくは公式の記事をご覧ください。
Noto Serif CJK が登場! |googleblog developers Japn

下記リンクより無償でdownload可能です。
Google Noto Fonts

Noto Serif CJKのライセンスについて

ライセンスは“SIL Open Font License 1.1”で、フォント単体での販売は禁止されていますが、アプリへの組み込みや改変可能です。

Noto Serif CJKの使い方

Noto Serif CJKの設置

Google Noto Fontsよりフォントをダウンロードしていただいて、使いたいプロジェクトのディレクトリにNoto Serif CJKを配置します。

Noto Serif CJKは7つのウェイトがあるのですが、読込の容量をなるべく減らしたいので、RegularとBoldの2種類で読み込みます。

2種類あれば普通に使うテキストと強調したいところの2パターンを使い分けることが出来るので使いやすいです。

Noto Serif CJKの読み込ませ方

フォントデータを設置させただけでは読み込まれませんのでCSSからWebフォントをダウンロードできるようにします。

font-faceの設定

Font-faceの設定は少しややこしくてブラウザ毎に分けて行う必要がありまます。
古いブラウザにも対応しようと思うと下記のような書き方で大丈夫です。

古い書き方
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

※MyWebFontという部分は読み込ませたいフォントデータによって変えてくだいね。

もうIE8のサポートはしなくていい状況ですので、私はeotを読み込ませず、下記のような書き方が最適かなと考えています。
※googleのWebフォントも同じような読み込ませ方をしていますのでGoogleを信じます。

今風の書き方
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ Android4.4+  */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 Android4.3 */
}

私が書いたnoto serifのfont-faceとその他のCSS

読込先のパスに間違いがなければ、下記のようなCSSを追加すればNoto Serifが正常に読み込まれます。

@font-face {
    font-family: 'Noto Serif Japanese';
    font-style: normal;
    font-weight: 400;
    src: url(../../fonts/NotoSerifCJKjp-Regular.woff2) format('woff2'),
    url(../../fonts/NotoSerifCJKjp-Regular.woff) format('woff'),
    url(../../fonts/NotoSerifCJKjp-Regular.otf) format('opentype')
}

@font-face {
    font-family: 'Noto Serif Japanese';
    font-style: normal;
    font-weight: 700;
    src: url(../../fonts/NotoSerifCJKjp-Bold.woff2) format('woff2'),
    url(../../fonts/NotoSerifCJKjp-Bold.woff) format('woff'),
    url(../../fonts/NotoSerifCJKjp-Bold.otf) format('opentype')
}

html, body {
    font-family: 'Noto Serif Japanese', sans-serif;
}

デモ

今から確認出来るように、デモ環境を用意しています。

Noto Serif CJKのデモ

本来はサブセット化(軽量化)したものを読み込ませるのですが、ちょっと今回サブセットが上手く行かなかったのでフルサイズで読み込ませています。
ですので、ちょっと表示が遅いのはご了承ください。

そのうち、サブセット化したものに差し替えます。

Webフォント楽しい(*ゝω・*)

関連記事

使ってみたい管理ツール 近々職場の環境が変わりそうなので、プロジェクト管理ツールが必要になるかもしれないのでメモ。 Backlog ガンチャートが使い勝手良さそうだけど、その機能使う場合は月額費用がかかってしまうのが気になりどころ。 brabio 5IDまでOKの無料.エクセル風なので他の人でもとっ...
現役WebデザイナーがデザインツールをSketch一択にした理由... 転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。 ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。 以前使っていたデザインツール もともとはFireworksをメインに使っていました。 ただ開発...
日本語でわかるSketchの使い方と機能 実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...