ウェブサイトで明朝体のフォントを使う場合、現行の主流は以下の3つ。

  • Google Webフォント「さわらび明朝」
  • Google Webフォント「Noto Serif Japanese」
  • 游明朝体(Windows 8.1以降およびMacで標準搭載)

ただし、「Noto Serif Japanese」以外はブラウザや機種ごとの問題点があるので、個人的には2020年1月時点では「Noto Serif Japanese」の1択です。

1択ではありますが、今後の各フォントの環境等が変われば、選択肢もまた変わるということで、本記事は備忘録としてそれぞれの書体の特徴や実装方法と問題点をまとめています。
※各フォントごとの情報不要であれば「Noto Serif Japanese」だけを閲覧ください

游明朝体

フォントを適用させる際、注意しなきゃいけない要素の1つに「Windows」「Mac」で表示できる書体はどれか、という点があります。 例えば、「メイリオ」とか「ヒラギノ」とかが代表的ですが、これらはそれぞれの機種ごとでしか標準搭載されていません。

ですが、游フォント(游ゴシック、游明朝)は、Windows 8.1以降およびMacで標準搭載されているフォントのため、パソコン環境では原則的に端末依存しないフォントとして重宝されています。 ただし、

  • Andoroidには搭載されていない
  • IEで見ると文字下に余白が空いてしまう
  • Windows Chromeで見ると游フォントが掠れて表示される(細い)

という問題点があります。 それでも、ウェブサイトで使用するフォントとして採用される機会は多いかと思いますので、その設定方法や注意点についての詳細をお探しの方は以下の投稿を参照ください。

Noto Serif Japanese

Google Web Fonts(つまりウェブフォント)のため、機種依存の心配もなく使えます。設定もGoogle Fontsのサイトから、SELECT THIS FONT→CUSTOMIZE→Japaneseを選択し、以下のように設定するだけ。

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&display=swap&subset=japanese" rel="stylesheet">
 /* style.css */
 font-family: 'Noto Serif JP', serif;

ほかにもこんな明朝体フォントがある

明朝体フォントは今回挙げた3つだけじゃなく、たとえば「こころ明朝」「はんなり明朝」などのフォントもあります。
https://googlefonts.github.io/japanese/

ただ、上記リンク先からそれぞれのフォントを見てもらうと分かる通り、「こころ明朝」「はんなり明朝」は少し形状にクセがあるので、使う機会は限られてきますね。