汚いフォントに別れを告げられる拡張機能を作った

ブラウジングをしていると、文字がギザギザのページに遭遇することはありませんか？そんな悩みを解決する拡張機能を開発したので、今回はそのご紹介です。

どんな拡張機能か  

前述の通り、Web サイトの汚い文字を綺麗にする拡張機能です。

インストールはこちらから

Chrome→ https://chrome.google.com/webstore/detail/oecglhldbofcklanmhckefiflhfhabdd

Firefox→ https://addons.mozilla.org/ja/firefox/addon/replace-with-noto/

ソースコード→ https://github.com/r-40021/replace-font

インストールするだけで使えます。

拡張機能がしていること  

そもそも、なぜ一部の Web サイトの文字はギザギザしているのでしょうか？

多くは、フォントとして MS ゴシック を使用しているためです。

この MS ゴシック、実は30年前に作られた古いフォントです。

低解像度のディスプレイでも読みやすいようにと開発されたフォントで、現在の高解像度のディスプレイとの相性が悪いのです。

「じゃあ、なぜ未だに MS ゴシックを採用しているサイトが有るのか」と思うかもしれません。

理由は色々ありますが、

• 過去の慣習が残っている
• 更新がしばらく止まっている

等があると思います。

また、Windows に未だに MS ゴシックが搭載されているのは互換性維持のためです。

そこで、この拡張機能はこの MS ゴシック を、読みやすくてきれいな Noto Sans に置き換える働きをします。

対象は MS ゴシックだけでなく…  

当初は MS ゴシックのみを置き換える拡張機能の予定でしたが、翌々考えてみれば他にも読みづらいフォントは色々あります。

例えば、

• 游ゴシック
• メイリオ

等です。

メイリオについては意外に思うかもしれませんが、ディスプレイによってはかすれることがある少し厄介なフォントです。(MS ゴシックに比べれば1億倍マシですが)

あと、THE・Windows のフォントって感じが好みではない。

これらのフォントも、ちゃんと Noto Sans に置き換えます。

開発に当たっての苦悩  

Noto Sans は綺麗で素晴らしいフォントなのですが、容量が大きいという欠点があります。

そこで、サブセット化を行いました。

サブセット化とは、フォントの中から必要な字のみを抽出することです。

これにより、大幅にフォントファイルのサイズを削減することができました。

また、フォントファイルの形式には、圧縮効率が高い WOFF を使用しました。

サブセット化及び WOFF への変換に使用したソフトウェアは以下のとおりです。

• サブセットフォントメーカー
• WOFFコンバータ

サブセット化で収録文字数を減らせばフォントファイルのサイズも小さくなりますが、収録文字数が少なすぎると一部の文字が Noto Sans に置換されないという事態が発生します。

そこのバランスが難しかったです。

最終的に収録した文字の一覧はこちらの記事にまとめてあるのでご覧ください。

• フォントのサブセット化で入れておきたい文字【常用漢字・JIS第1水準だけじゃダメ】

さらに、フォントファイルを先読みしておくことで、フォント読み込みにおけるちらつきを軽減しました。

評判  

Chrome ウェブストアで高評価を頂いたほか、その他の利用者の方々からも多数の喜びの声を頂いています。

この場をお借りして御礼申し上げます。

より多くのサイトの文字を見やすくする  

この拡張機能で一部の Web サイトのフォントは綺麗になりますが、フォントを特に指定していないサイトではこの拡張機能は効力を発揮しません。

これらのサイトも美しい Noto Sans で見たいという方は、ブラウザの設定から変更できますのでぜひやってみてください。

この記事では具体的な設定方法は割愛します。

(そのうち記事書くかも)

(2022/5/30 追記)

記事書きました。

Chrome のフォントを美しい Noto Sans にする方法

設定自体はそこまで難しくはないです。

最後に  

この拡張機能は自分の中でも出来にかなり自信があります。

もちろん自分も愛用しています。

「この拡張機能良いな」と思ったら、ぜひ使ってみてください！

Chrome→ https://chrome.google.com/webstore/detail/oecglhldbofcklanmhckefiflhfhabdd

Firefox→ https://addons.mozilla.org/ja/firefox/addon/replace-with-noto/

ソースコード→ https://github.com/r-40021/replace-font

関連記事

2022年1月14日 • 4 分 で読了

1年間いろんなブラウザを試した結果、結局Chromeに戻った話

今では様々なことがブラウザ上で完結するようになり、「PC で最も長い時間使っているソフトはブラウザ」という方もかなり多いのではないでしょうか。...

2021年9月9日 • 4 分 で読了

Google ドライブの動画が再生できないときの対処法

原因は、Chrome のアレ

2021年8月9日 • 7 分 で読了

Chrome 拡張機能を作って公開しよう 最終回　〜Web ストアに公開〜

いよいよ Web ストアに公開します！

2021年8月8日 • 6 分 で読了

Chrome 拡張機能を作って公開しよう⑥　〜コンテキストメニューを作る〜

1回15分でサクッと開発。今回は、拡張機能をコンテキストメニューからも起動できるようにします。

2021年8月7日 • 3 分 で読了

Chrome 拡張機能を作って公開しよう⑤　〜権限多すぎ問題を解決〜

1回15分でサクッと開発。今回は「権限多すぎ問題」を解決していきます。

2021年8月4日 • 14 分 で読了

Chrome 拡張機能を作って公開しよう④　〜コピー機能の実装〜

1回30分でサクッと開発。要となるコピー機能の実装を行います