て、もうだいぶ前の話なんですが。

Android系など一部スマホではシステムフォントに明朝体が搭載されておらず、CSSで明朝系を指定しても反映されませんでした。

しかしあれだね、時代は動いているんだ。

Google様がまたやってくれたんです。

その名も
日本語 早期アクセス

・・・ちょっと「早期アクセス」の意味がわかんなかったんですが、いわゆるベータ版ということのようです。

目次

WEBフォントとは

ユーザーの環境に関係なく、基本的にどんな端末でも同じ書体を再現できる仕組みを WEBフォントと言います。

ファイル形式でなら、明朝系を含め、素晴らしいフリーフォントが結構公開されてはいます。
が、フリーとはいえ利用規約がそれぞれに違いますし、やっぱり少しハードルが高いですね。
技術的にも、そのフォントファイルをいったんダウンロードさせてもらい、環境ごとに読み込めるフォーマットが違うので何種類かに変換したものを用意して、それらをサイトのサーバーにアップして、そのファイルを参照するためのコードを環境別に全部CSSに書いて…と、かなり面倒な手間がかかります。

例えば私が「ふもみち体」みたいなオリジナルフォントを作ったとしたら、フォントファイルのフォーマットを四つほど用意し、ブログのサーバーに全部アップロードして、スタイルシートに
@font-face {
  font-family: 'ふもみち体';
  font-style: normal;
  font-weight: 400;
  src: url(ファイルパス/HumomitiFont.eot);
  src: url(ファイルパス/HumomitiFont.eot?#iefix) format('embedded-opentype'),
       url(ファイルパス/HumomitiFont.woff2) format('woff2'),
       url(ファイルパス/HumomitiFont.woff) format('woff'),
       url(ファイルパス/HumomitiFont.ttf) format('truetype');
}
こんな指定をして、やっとWEBで使えるようになります。

この面倒な手順を踏まなくて済む仕組みがCDNです。

フォントを読み込むためのややこしいコードがあらかじめCSSにまとめてあり、ユーザーはそのリンクを読むだけ。
各種フォーマットのフォントファイルの参照には、多数のアクセスがあっても落ちない強力な外部サーバー、またはWEB上のキャッシュで対応していて、サイトのサーバーにファイルを置く必要がありません。

OSに関係なく、フォントのデータをWEBから持ってくるWEBフォントのCDNがあるのは知ってたんですが、以前調べた時には、CDN形式でフリーで使える日本語WEBフォントが(一つしか)無かったので、そのように記事に書いたことがあります。

サンプル

前置きが長くなりましたが、Google が公開した「日本語 早期アクセス」のフォントがどんなものか、実際に表示してみましょう。
フォントのデータが無い文字が目立つように、代替テキストの serif 系と sans-serif 系を敢えて逆にしています。

M+1p

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/mplus1p.css">
stylefont-family:'Mplus 1p', sans-serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

JIS第2水準は一部対応。

Rounded M+ 1c

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css">
stylefont-family:'Rounded Mplus 1c', sans-serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

上記「M+1p」をまるっこくした書体。

はんなり明朝

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/hannari.css">
stylefont-family:'Hannari', serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

ひらがなとカタカナのみ。
それを逆用して、代替フォントにゴシック系を指定すれば、ゴシック漢字＋明朝かな、のﾅﾝﾁｬｯﾃ漫画フォントになりますね。

こころ明朝

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/kokoro.css">
stylefont-family:'Kokoro', serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

なんか婦人雑誌っぽい、おされな書体ですね。
こちらもひらがな・カタカナのみ。

さわらび明朝

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css">
stylefont-family:'Sawarabi Mincho', serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

今回リリースのフォントでは、漢字が使える唯一の明朝体です。
ただし、JIS第2水準にはほぼ未対応。

さわらびゴシック

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css">
stylefont-family:'Sawarabi Gothic', sans-serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

同じさわらびシリーズですが、こちらの方がJIS第2水準に多く対応。
明朝の方が作るの難しいんですかね。

ニクキュウ

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nikukyu.css">
stylefont-family:'Nikukyu', fantasy;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

とてもユニークなデザイン書体ですが、カタカナしかありません。
ひらがなを書いてもカタカナに置き換えられます。
カタカナでも「ヰ」と「ヱ」がありません。

ニコモジ

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nicomoji.css">
stylefont-family:'Nico Moji', sans-serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

なんかよく見る書体ですが(笑)
ひらがな、カタカナ、英数字が使えます。

Noto Sans Japanese

link<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
stylefont-family:'Noto Sans Japanese', sans-serif;

アラサーだよ！(27)

全國區の魑魅魍魎
「昏鐘鳴の音が聞こえるか？」

Glossy future

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす ん

以前調べた時に一つだけあったフリーの日本語WEBフォントというのが、これです。
JIS第2水準もほぼ表示できるようです。
CJK統合漢字拡張まで対応してくれたら完璧ですが、さすがにまだそこまでは。

設定方法

各リストの附表の「link」「style」の項目をコピペすれば設定できますが、ここでは具体例と、若干の蛇足を。
いちばん需要が多そうな、明朝体で漢字が使える「さわらび明朝」を例にします。
他のフォントを使うには、黄色く強調した部分をそのフォントの設定にします。

<link>タグの設置

以下のタグを、HTMLのなるべく上の方(できれば<head>内)にコピペします。
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
ライブドアブログではスマホのテンプレートは編集不可な上、スマホ用フリーエリアに貼っても無効化されるみたいなので、記事の中に貼ります。
その際、記事の一番上に貼ってしまうと、PC版のトップページを表示する時に貼った記事の数だけ同じ<link>タグが読み込まれて不経済なので、私は「続きを書く」の方に貼って回避しています。
この仕様何とかなりませんかね…

CSS

以下の CSS をスタイルシートに追加、または HTML文書の<style>タグの中に書き込みます。
.wf-SawarabiMincho{
  font-family: 'Sawarabi Mincho', serif;
}
クラス名wf-SawarabiMinchoは分り易ければどんな名前でもいいです。

セレクタリスト

「アタマにピリオドのついた CSSクラス名」は、「そのクラス名を持つ要素」を表わすセレクタです。
このフォントで表示させたいHTML要素にclass="wf-SawarabiMincho"という属性を与えれば、その要素の中の文字が「さわらび明朝」で表示されます。
{}で囲った一組のスタイルに対して、セレクタは、クラス名以外でも、いくつでも指定できます。
.wf-SawarabiMincho,
div#sawarabiBox,
a[href^="https://"],
input[type="radio"]:checked + span,
blockquote{
  font-family: 'Sawarabi Mincho', serif;
}
このように指定すると
  1. 「wf-SawarabiMincho」というクラス名を持った不特定の要素
  2. 「sawarabiBox」というIDを持った div要素
  3. href属性が「https://」で始まるa要素
  4. チェックされた状態のラジオボタンの隣にあるspan要素
  5. 全てのblockquote要素
各要素内の文字が、「さわらび明朝」で表示されます。

代替フォント

フォントのデータに無い字は代替フォントで表示されます。
代替フォントはいくつでも設定でき、先に指定したフォントが無ければ、順次次のフォントを読みに行きます。
逆に、代替フォント名を省略すると、親要素から継承されたフォント、それが特に無ければシステムの標準フォントが適用されます。
空白を含まない半角英数字のフォント名であれば、引用符は省略できます。
最後尾の代替フォント名は、ゴシック系にはsans-serif、明朝系にはserif、ソースコード表示用などの等幅フォントにはmonospaceを指定するのが一般的です。
これらは具体的なフォント名ではなく、環境の標準フォントを指すキーワードです。
例えば Windows系の環境であれば、sans-serifにはMSゴシック、serifにはMS明朝、などと設定されているはずです。
他に筆記体のcursive、装飾文字系のfantasyがありますが、日本語の環境でそこまで設定することはあまり無いようです。

HTML文書

class属性でクラスを指定

<span class="wf-SawarabiMincho">アラサーだよ！</span>
これがいちばん普通の方法だと思います。
クラス名長っ！と思ったら、もっと短くしましょう。

style属性でフォントを直接指定

<span style="font-family:'Sawarabi Mincho', serif">アラサーだよ！</span>
こちらはあまりお勧めできないやり方ですが、ピンポイントで使うだけなのでいちいちクラスを作るのも面倒臭いな…という時に。
タグ ：
#GoogleFonts
#日本語早期アクセス
#明朝体
#CSS
#小鍛治健夜