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

関連記事

元WEBデザイナが1年間WEBディレクターになってみて気がついた事... 2013年2月から転職をしました。 前職はWEBデザイナーでしたが今はWEBディレクターです。 もともとコミュ力が低いのにディレクターに転向したのは今でも無謀だったなーと思っていますが、将来的にディレクションのスキルを持っていないとマズイなと考えているので後悔はしていません。 ただやりたいと思...
使ってみたい管理ツール 近々職場の環境が変わりそうなので、プロジェクト管理ツールが必要になるかもしれないのでメモ。 Backlog ガンチャートが使い勝手良さそうだけど、その機能使う場合は月額費用がかかってしまうのが気になりどころ。 brabio 5IDまでOKの無料.エクセル風なので他の人でもとっ...
色選び苦手な人に勧めたい、マテリアルデザインのカラーパレットの活用方法(初心者向け)... Google のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
現役WebデザイナーがデザインツールをSketch一択にした理由... 転職を期に制作環境がmacに変わったのもあって二ヶ月前からsketchを導入しました。 ちょっと感動とか恋に落ちるとかのレベルを超えて衝撃的を受けています。sketchまじヤバイ。 以前使っていたデザインツール もともとはFireworksをメインに使っていました。 ただ開発...
WinSCPで特定フォルダをアップロードから除外した... 普段WinScpの同期の機能を使ってアップロードしているのですがGitを使っているとそのファイルも対象になってしまうのでうざいなと感じてました。 設定画面で簡単にできたのでメモです。 上記画像の除外のところにといれれば.gitっと記載されているフォルダはアップロードの対象外となります...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...