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フォント楽しい(*ゝω・*)

関連記事

【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
使ってみたい管理ツール 近々職場の環境が変わりそうなので、プロジェクト管理ツールが必要になるかもしれないのでメモ。 Backlog ガンチャートが使い勝手良さそうだけど、その機能使う場合は月額費用がかかってしまうのが気になりどころ。 brabio 5IDまでOKの無料.エクセル風なので他の人でもとっ...
失敗しにくいWebデザインの制作フロー... WEbデザイナーに限らずですが、Web業界は流行り廃りや進歩が早いのでスキルアップが重要ですよね。 割と私はコーディングが得意なので、それしかできないと誤解されがちですが、全然デザインもやってます。 ※グラフィックデザインは苦手なので避けてますが…。 自分のデザインに自信がないって人は...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
WebデザイナでもできるGitで本番環境に更新(同期)をする方法... 数年前からGitは使っていて最近ようやくバージョン管理にも慣れてきたかなと思っているのですが、実は本番環境のデータがどのコミットのものか把握できでいない時があり悩んでいました。 以前から特定のブランチのものを絶対に公開バージョンにしたいと画策していましたが上手く言っていなかったのです。 当初...
Webデザイナーにオススメしたい雑誌からの情報収集... 私は日々情報収集には結構力を入れていいる方だと思いますが、最近他の人がやっていないような情報収集で結構お気に入りのものがあるのでご紹介します。 雑誌からの情報収集 みなさん、情報収集というとやはり、ネットが多くないですか? 私もネットが今でも中心です。 webデザインなど普段から...