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 のマテリアルデザイン良いですよね。 特にカラーパレットがいいなと思っています。 サイトを作る際に「何色を使おう」、として色を決めても「じゃあこの色の濃いバージョン、薄いバージョン」などより複数の色が必要になってきてある程度組み合わせの検証の時間が...
ワイヤーフレーム作成用のUIパーツを作りました(DL可能)... WEBサイトを作る際に使用するワイヤーフレームのパーツ集を作りました。 Fireworksに特化して使えるようにしています。 個人・商用の利用は自由なのでディレクタさん達に利用いただけると嬉しいです。 ダウンロードする...
これからWebデザイナーを始める人にオススメ。脱Adobeという選択... この記事はSketch Advent Calendar 2016の15日目の記事になります。 皆さんAdobe製品は使ってますか? 私は使っていません(CCの契約はしているけど)。 理由は単純でAdobe以外のツールを使ったほうが私は効率が良かったからです。 私はSketchに出...
WinSCPで特定フォルダをアップロードから除外した... 普段WinScpの同期の機能を使ってアップロードしているのですがGitを使っているとそのファイルも対象になってしまうのでうざいなと感じてました。 設定画面で簡単にできたのでメモです。 上記画像の除外のところにといれれば.gitっと記載されているフォルダはアップロードの対象外となります...
デザイナーなら抑えておきたい著作権の勘どころ... 著作権って名称はよく聞くけど、実際はどんなものについているのかよくわからない。 私もそんな一人です。 デザインの仕事をしていると著作権関係の話が時々聞こえてきますのでちょっと調べてみました。 制作者には自動的に著作権がある。 小説、イラスト、写真、音楽などの著作物を制作した場合は自動...
Githubからセキュリティ警告が来たときの対応... githubのリポジトリを確認すると下記のalertが表示されてました。 調べてみるとnpmの特定のpackageにセキュリティホールが見つかっているという内容ででした。 We found potential security vulnerabilities in you...