4/10はなんの日かご存知ですか？
そう、フォントの日です。
本記事では2017年4月に公開となった明朝体で使えるWebフォント Noto Serifの使い方を紹介します。
とりあえず見たい方はデモを用意しているのでそちらをご覧ください。
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は７つのウェイトがあるのですが、読込の容量をなるべく減らしたいので、RegularとBoldの２種類で読み込みます。
２種類あれば普通に使うテキストと強調したいところの２パターンを使い分けることが出来るので使いやすいです。
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;
}
デモ
今から確認出来るように、デモ環境を用意しています。
本来はサブセット化（軽量化）したものを読み込ませるのですが、ちょっと今回サブセットが上手く行かなかったのでフルサイズで読み込ませています。
ですので、ちょっと表示が遅いのはご了承ください。
そのうち、サブセット化したものに差し替えます。
Webフォント楽しい(*ゝω・*)