Wordpressに限らず、Webサイトを作るのにフォントをどう指定するかが悩みどころだ。

Apple系（Mac・iPhone・iPad）は、迷うことなく「ヒラギノ角ゴ」で決まり。なぜならiPhoneの日本語フォントがこれだからだ。

問題はWindowsで、最も期待できるのが「メイリオ（Meiryo）」なのだが、これは視認性優先のデザインなのかあまり美しくなく、ボールドの太さとのバランスが悪い。「游ゴシック（YuGothic）」は、細すぎてかすれてしまう。MSゴシックは論外だ。

じゃあMacから「ヒラギノ角ゴ」をWindowsに持ってきてしまえば・・・というアイデアもあるが、Windowsで見る「ヒラギノ角ゴ」は汚くなってしまうのだ。理由はよく分からないのだが、フォントのレンダリング技術の違いだろうか。最近の製品はWindowsでもきれいに見えるようだが・・・。そもそも、自分のPCにだけフォントが入っていても、解決にはならないし。

そこでWebフォントを使うという手がある。

https://typesquare.com/ でユーザー登録し、サイトも登録し、フォントには「ヒラギノ角ゴ W3 JIS2004」を選ぶ。

ヘッダー（Luxeritasならadd-header.php）に

<script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?HOGEHOGEHOGE" charset="utf-8"></script>

style.cssのbodyのfont-familyに、

"Hiragino Kaku Gothic W3 JIS2004"

これでWindowsでも、最近のきれいな「ヒラギノ角ゴ」を使うことができた。

しかし、TypeSquareの無料のプランでは、一つのフォント、一つのサイトしか使えない。ウェイトも一つしか指定できないので、ボールドが際立ってくれないし、ローカルで編集してデプロイさせるのにも使えない。

そこで、Google Fontsを使うことにする。

https://fonts.google.com/ で、英文字は Roboto、日本語は Noto Sans JPを指定し、さらにRobotoにイタリックとボールドを、加えてギリシャ文字を使いたい・・・。

CSSに、こんな感じの指定をする
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP|Roboto:400,400i,700&display=swap&subset=greek,japanese);

body {
  font-family: Roboto, 'Noto Sans JP', sans-self;
}

これでWindowsでも、しっかりとしたフォントで表示できるようになった。だが、一つ欠点があり、Apple系でもGoogle Fontsを使うことになってしまう。

自分はWindows+Androidなので、気にしていなかったのだが、アクセスの一番多いのはiPhoneで、しかも細い回線を使っている人もいるので、その人たちにとってもれば、Google Fontsを使われるのは迷惑でしかないのだ。なぜなら、Noto Sans と「ヒラギノ角ゴ」の間には表示品質の差はそんなにないからだ（Apple製品で見た場合の話）。

そこで、各ブラウザごとにフォント指定をして、ChromeとFirefoxの場合にはGoogle Fonts、Safariの場合には「ヒラギノ角ゴ」にしたい。その選別がなかなか面倒だったのだ。

一番役に立ったサイト、
CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge
https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
 ...
}

この…のところに、先ほどの@importとかbodyのフォント指定を記述する。

これはChrome用とうたっているのだが、なぜかFirefox 70もこれにひっかかってしまった。

_::-webkit-full-page-media, _:future, :root body {
 ...
}

この…のところに、先ほどの@importを書かなければ、Google Fontsはロードされない。bodyのフォント指定には「ヒラギノ角ゴ」を指定しておく。

これはSafari用とうたっているのだが、ChromeもFirefoxもこれにひっかかってしまった。

@media not all and (min-resolution:.001dpcm) { @media {
  _::-webkit-full-page-media, _:future, :root body {
    ...
  }
}

こちらは、Safariの10.1以降用。

今回はFirefoxはChromeと同じ扱いで良かったが、Firefoxを区別したい場合、
Targeting only Firefox with CSS
https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css

@supports (-moz-appearance:none) {
 ...
}

2020年まで使えるfont-familyおすすめゴシック体
https://qiita.com/RinoTsuka/items/4181efd43d072e246519

スマートフォンを考慮したフォント指定の検討
https://weback.net/mobile/1823/