普段のウェブサイト制作ではゴシック体を使うことが多く、この問題に気づくのが遅れました。
タイトルのとおり、明朝体フォントがAndroid端末では表示されません。
以下、解決策を調べたので個人的な備忘録を兼ねて紹介していきます。
検証
まずは大前提。
なんと「Android 第4世代」「Android 第6世代」には明朝体フォントがインストールされていません。
そのためスタイルシートで普通に「font-family」で明朝体を指定しても無意味。
ちなみに Android 6.0(Marshmallow)に搭載されている標準フォントは「Noto Sans CJK」になります。
機種によっては異なるフォントが「標準フォント」として使われている場合もあります。
また Xperia だけは「Noto Sans CJK」さえも搭載されていないようで、こちらも大きな問題となっています。
「Android 5.0世代」では明朝体も表示される、との情報があります。
……が、こちらは未検証。
解決策は?
上記の理由から、Android端末で明朝体フォントを表示させるためにはウェブフォントを利用するしか方法はありません。
「Google Fonts」で「Noto Serif Japanese」が使えれば一発で解決なのですが、残念ながら現時点ではまだ「Noto Serif」の日本語版はウェブフォントとして提供されていないので、他の方法が必要。
そこで挙げられる解決策は4つ。
- Adobe が提供している「Typekit」で「源ノ明朝」ウェブフォントを使う。
- 各種、有料のウェブフォントを使う。
- 「Google Fonts + 日本語 早期アクセス」を使う。
- 自前のサーバーにフォントファイルをアップロードして使う。
「Typekit」の「源ノ明朝」は「Noto Serif Japanese」と同じものなので、かなり現実的な解決策になるはずです。
しかし、無料プランでは上限が月間25,000PVまでと設定されています。
わざわざこの問題のために追加で料金を支払いたくない!
……というのが多くの方の意見でしょうから、「Google Fonts + 日本語 早期アクセス」を使うのが最善でしょうか。
- Typekit 源ノ明朝
- https://source.typekit.com/source-han-serif/jp/
https://typekit.com/fonts/source-han-serif-japanese- Google Fonts + 日本語 早期アクセス
- https://googlefonts.github.io/japanese/
ただし「Google Fonts +」の明朝体を使う場合、Androidの標準フォントと混ざって表示されると、かなり見苦しい状態になるので現実的には多数の漢字にも対応している「さわらび明朝」を使うことになります。
以下がHTMLとCSSのそれぞれの記述方法。
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css">
.mincho {font-family:"Sawarabi Mincho", serif;}
これでclass="mincho"
を指定した箇所が明朝体で表示されます。
サーバーにフォントファイルをアップロードして使う方法も、場合によっては有効です。
しかしこちらは読み込みがかなり遅くなるので個人的には非推奨。
結論
自信を持って「この方法が良いよ!」と提案できないことが非常に残念です。
Android OS が早期に明朝体に対応してくれることを祈りましょう……。