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

関連記事

色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)... Google のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
日本語でわかるSketchの使い方と機能 実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command...
WebデザイナでもできるGitで本番環境に更新(同期)をする方法... 数年前からGitは使っていて最近ようやくバージョン管理にも慣れてきたかなと思っているのですが、実は本番環境のデータがどのコミットのものか把握できでいない時があり悩んでいました。 以前から特定のブランチのものを絶対に公開バージョンにしたいと画策していましたが上手く言っていなかったのです。 当初...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
現役Webデザイナーがランディングページのセミナーで学んだこと... 2016/11/05に行われた 「フォルトゥナ ランディングページセミナー」に参加してきました。 デザイン関連の勉強会というのも珍しいですし、しかもランディングページといったあまり表に出てくる事のない勉強会なのもあって新鮮な話・心揺れる話が盛りだくさんで非常に満足の行くセミナーでした。 ...
Webデザイナーにオススメしたい雑誌からの情報収集... 私は日々情報収集には結構力を入れていいる方だと思いますが、最近他の人がやっていないような情報収集で結構お気に入りのものがあるのでご紹介します。 雑誌からの情報収集 みなさん、情報収集というとやはり、ネットが多くないですか? 私もネットが今でも中心です。 webデザインなど普段から...