先日、はてなの久しぶりの新サービス「はてなパークス」がサービスインした。
さっそくアクセスしてみるとウッ、すべてのフォントが游ゴシックUIだ。これはつらい。スタイルシートで変えよう。
- はてなパークスのスクリーンショット

- 一部を拡大

どこのスタイルシートを変えればいいのか調べた。どうやらフォントはここで指定されているようだ。
:root { --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; }
--font-family-baseの筆頭が「system-ui」になっている。Windowsの標準だと游ゴシックUI(Yu Gothic UI)がそれにあたる。この手前に好きなフォント名を書けばいい。
ブラウザの拡張機能であるStylusで「p.hatena.ne.jp」のスタイルを作成する。
たとえばはてなパークスをNoto Sans JPで表示したければこうする。2行目の後ろの方に「"Noto Sans JP", 」があるので、「--font-family-base: 」の直後に移動すればいい。
:root { --font-family-base: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Yu Gothic Medium", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; }
- 表示結果

- 一部を拡大

游ゴシックMediumがいい人はこう。2行目の「system-ui, 」の前に「"Yu Gothic Medium", 」を追加した。
:root { --font-family-base: "Yu Gothic Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; }
- 表示結果

- 一部を拡大

ブラウザで設定しているフォントに合わせたい人は「--font-family-base: inherit, ~」と書いておけばいいはず。
:root { --font-family-base: inherit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif; }
フォントとしては游ゴシックMediumが好きだけど、やや小さい文字の表示にはNoto Sans JPが向く。はてなパークスはNoto Sans JPで表示することにした。
Stylusの使い方については、下の記事で軽く解説している。





































