「Stylus」でChromeの閲覧環境のフォントを変更する

はじめに

フォント変更の手順

1. 事前に、使用したいフォントをPCのローカル環境にインストールしておく必要があります。
Lato 👇
Google Fonts

Making the web more beautiful, fast, and open through great typography

https://fonts.google.com/specimen/Lato

Lato

オープンソースのフォントでは、GoogleとAdobeが共同開発した「Noto Sans CJK（源ノ角ゴシック）」もナウいので👇
Google Noto Fonts

When text is rendered by a computer, sometimes characters are displayed as "tofu". They are little boxes to indicate your device doesn't have a font to display the text. Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel.

https://www.google.com/get/noto/

Noto

2. 普段使っているブラウザフォントを、「What Font」で調べてください。 このフォントをStylusで置き換えていきます。
What Font - find font
Lets you know what font is used on any website
https://chrome.google.com/webstore/detail/what-font-find-font/djgfpbegnihdgbngpmhjnlchgglngcdn

3. 僕がstylusに書いたcssはこちら。 フォントごとに、weightのnormalとboldを一つ一つ変更するだけです。

CSS

Macであれば、「Font Book」というアプリでローカルなフォントを管理しています。 src:local(""); の中には、フォントのFull nameを入れると良いとのこと。

4. 単純なcssですが、Twitter、YouTube、instagram、Notionあたりはかなり見やすくなった気がします。







よく触るNotionのフォントが変わったのがアゲ↑ポイントですね。
 

「stylus」でサイドバーの非表示もしたいな

「Stylus」でTwitter, YouTube, Instagramのサイドバーを非表示にする2021/6/22 22:232023/1/19 12:47