ブラウザで見るBlueskyの本文フォントを変更するCSS

Windowsのブラウザで見るBlueskyは本文のフォントがYu Gothic UIでちょっと読みづらいと感じる。好きなフォントに変更するCSSを書いた。

「設定」－「外観」で「フォント」を「テーマ」にしてから、以下のCSSをStylusに登録する。「Yu Gothic medium」の部分はお好みのフォントでどうぞ。

@font-face {
  font-family: 'InterVariable';
  src: local('Yu Gothic medium');
}

もうちょっと丁寧に説明

1. 使っているブラウザに合わせて、Chrome版、またはFirefox版のStylusをインストールする
2. 「設定」－「外観」（https://bsky.app/settings/appearance）で「フォント」を「テーマ」にする
   
3. Blueskyの任意のページ上でStylusのアイコンをクリックし、「次のスタイルを書く」が「bsky.app」のみに下線が引かれた状態でクリックする
   
4. Stylusのスタイルエディタが開く。「スタイルエディタ」の下の欄はほかと区別しやすい名前に（たとえば「Bluesky本文フォント変更」）。「コード1:」に上のCSSをペーストし、「保存」ボタンをクリックする
   

これが

こうなった

Stylusを使ったほかの記事

• はてなブログの本文中に差し込まれる広告を見分けやすくするCSS
• はてなブログのデザイン設定のダイアログボックスを大きくする