Stylusの記述例

Webサイトで使われるフォントは設定から変更することができますが、すべてのサイトに反映されるわけではありません。また、英語と日本語のフォントを別々に指定することができません。

これらの問題を解決できるChrome拡張機能として、一括で、またはサイトごとにフォントを変更する機能を提供するStylusというものがあります。

本記事では、現在私が用いているStylusの記述例を紹介します。英語フォントにRoboto、日本語フォントにNoto Sans JPを指定しています。一部生成AIを用いて作ったコードも含まれています。

一般の設定

適用範囲で「すべて」を指定することですべてのサイトに適用される設定をすることができます。しかし、サイトの実装によってはこれが適用されない場合があります。その時は、「サイトごとの設定」セクションを参照して設定してください。

/* すべてのテキストに適用（数式を除く） */
html, body {
    font-family: "Roboto", "Noto Sans JP", sans-serif !important;
}

/* 太字にも適用 */
b,
strong {
    font-family: "Roboto Bold", "Noto Sans JP Bold", sans-serif !important;
}

code {
    font-family: monospace !important;
}

サイトごとの設定

コード入力欄の下にある「追加」ボタンを押すとセクションが追加されます。セクションの左上で「次で始まるURL」を選択し、URL欄にhttps://~~~.comを指定することで、設定を適用するサイトを指定できます。

個々のWebサイトに対応するには、該当ページを右クリックし、「ページのソースを表示」して確認することによって該当部分に使われているHTMLタグ等を確認、指定するのが主になります。
コードブロックやアイコンは別に扱う必要があることが多いので注意して下さい。

以下、私が設定しているサイトのコードを掲載します。

X（旧Twitter）

/* ツイート本文 */
article div[lang] {
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
}

/* 投稿時刻（○○時間前など） */
time, time span {
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
}

/* UI全般（ボタンやナビなど） */
body, div, span, input, textarea, button {
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
}

Note

/* ページ全体の本文フォントを上書き（コードとアイコンは除外） */
html:not([class*="icon"]):not(.hljs),
body:not([class*="icon"]):not(.hljs) {
  font-family: "Roboto", "Noto Sans JP", sans-serif !important;
}

/* テキスト系要素（明示的に指定） */
p, span, div, h1, h2, h3, h4, h5, h6, li, a {
  font-family: "Roboto", "Noto Sans JP", sans-serif !important;
}

/* コードブロック */
code, pre, .hljs {
  font-family: monospace !important;
}

/* 疑似要素も同様 */
p::before, p::after,
span::before, span::after,
div::before, div::after {
  font-family: "Roboto", "Noto Sans JP", sans-serif !important;
}