ブログのフォント指定を再考する

きっかけ

あるフォントに一目ぼれして、そのフォントをブラウザデフォルトに指定した。 今までずっと、みんなWebフォントを使っているのかと思っていたけど、GoogleとかMicrosoftとか、結構なページの表示フォントがそれに変わった。

でも、DevToolsで見るといくらかのフォント指定は付いている。何が起きている?

せっかくお気に入りのフォントがあるなら

結局、今回フォントがゆるく指定(?)されているのがなぜだったのかはわからずじまいだった。 でも、好きでブラウザに指定したフォントがあるなら、それで表示されたほうが間違いなく嬉しいということは分かった。

だけど、初期設定のまま使っていてブラウザデフォルトのフォントが嫌いな場合もある。スマホからだと特にフォント指定がわからず困ったことになる。

でも、どこかのサイトで使われているフォントが自分の苦手なタイプだったら、読みづらくてブラウザバックしたくなる。実際、先日そんなことがあった。

ということは、やっぱり自分で指定したフォントとか、ブラウザデフォルトのフォントとかで表示されたほうが良いのだろう。

テーマがデフォルトでフォント指定している

さて、じゃあこのブログのフォントもブラウザデフォルトに変えてみよう。
もちろん、私が好きなフォントをWebフォントなどで指定しておきたい気持ちもある。だけど、誰とも知れないはずの私の記事を読んでくれる誰かがいるなら、その人には少しでも快適に読んでほしいから。

---

さてさて、知っている読者もいるとは思うが、このブログはChirpyというテーマをベースにしている。 そしてお節介なことに、このテーマには初めから事細かなフォント指定がついている。

ではこれをデフォルトにするには？そんなときは…とりあえずお約束、DevToolsでCSSを見ることにする。

ブラウザデフォルトのフォントたち

まず、ブラウザから設定されるフォントは主に3種類あり、それぞれsans-serif, serif, monospaceに入るはずだ。 基本的にはこういう風に分けられているはずだ。

• タイトルに使うと良いよとよく言われる、コンピュータ的な一定の線を持つゴシック体的なフォントがsans-serif
• 長文に適するとよく言われる、おしゃれでフォーマル、緩急のある明朝体的なフォントがserif
• プログラマ御用達、その名の通り幅が一定でソースコードに適したフォントがmonospace

結局のところ、この中のどれで見てほしいかはこちらが指定することになる。ではやってみよう。

現行サイトをDevToolsで探検する

とりあえず徹底的にいろんなところのテキストを検証する。

前にフォントをいじったとき、Jekyllのことをよく知らないが、何か不思議な力でフォント設定が伝播している場所があった。CSS変数をいじると時々そうなった。ということで、ひとまず変数から書き換えていく。

基本的な部分

よく見かけるのが--bs-body-font-family。どうもいろんなところで指定されているようなので上書き。いっそbodyもこれにしちゃえ。

:root {
  --bs-body-font-family:  sans-serif, "Noto Sans Mono", "BIZ UDPゴシック", "Source Sans Pro";
}

body {
  font-family: var(--bs-body-font-family);
}

私が指定したのが、時々グリフが抜け落ちてたりするフォントなのでフォールバックを残している。

このままjekyll sしても、これだけでも大部分が置き換わっていることがわかる。

見出し

--bs-body-font-familyの書き換えでは、見出しやFurther Readingなどの項は無反応だった。 じゃあ何が効いているのかというと、こんなセレクタ。コピペしてfont-familyだけ変えた。

header .post-desc, .site-title, #search-results a, h5, h4, h3, h2, h1 {
    font-family: sans-serif, "Noto Sans Mono", "Source Sans Pro";
    font-weight: bold;
}

これでほぼ変わります。

Archivesタブ

これが結構困ったことになってた。数字の幅が変わるので、afterで付けられている、年のあとの丸がずれている。px指定でこまごま配置されていて、いじりづらい。 色々試したけど、「幅」っていうのがどうも難しい。 まあ、数字だし、保留としようかな…

time {
  font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
}

code

スニペットこそ好きなフォントが良くないか！

--bs-font-monospace: monospace, "Noto Sans Mono";

これ一発で全部変わった！！！！

結局どうなったのか

:root {
  --bs-body-font-family:  sans-serif, "Noto Sans Mono", "BIZ UDPゴシック", "Source Sans Pro";
  --bs-font-monospace: monospace, "Noto Sans Mono";
}

body {
  font-family: var(--bs-body-font-family);
}

time {
  font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
}

header .post-desc, .site-title, #search-results a, h5, h4, h3, h2, h1 {
  font-family: sans-serif, "Noto Sans Mono", "Source Sans Pro";
  font-weight: bold;
}

これで行こうかと思ったんだけど、見出しやタグなんかはmonospaceがいいなという感覚に駆られて最後にもう一ひねりした。

header .post-desc, .site-title, #search-results a, h5, h4, h3, h2, h1 {
  font-family: monospace, "Noto Sans Mono", "Source Sans Pro";
  font-weight: bold;
}

button, input, optgroup, select, textarea,
#panel-wrapper .panel-heading {
  font-family: monospace;
}

.tag, .post-tag {
  font-family: monospace;
}

おまけ

ちなみに私が一目ぼれしたフォントというのはこちらのフォント。言語化はできないが、何かが刺さった。

機械彫刻用標準書体フォント