１　経緯

２０１８年４月にブラウザ上で見分けにくい文字について記事を書きました。（ブラウザ上でのOと０、１とIとｌの表示について）
その記事の中で、ブラウザ上で見分けにくい文字を表示するフォントを変更することで見やすくする方法を紹介しました。そのときの方法はMyricaというフォントをインストールしてStylishというChromeの拡張機能を追加して強引にフォントを変更するといったものでした。

しかし、この方法はフォントをインストールし、さらにChromeに拡張機能を導入しなければならないといった手間がかかること、また拡張機能を有効にするために相当な手間がかかるので今では実用性がなくなっています。
それでも時々は文字が見分けにくくなり、もっと気軽にブラウザのフォントを変更することができないか色々試してみて、かなり手軽にできる方法を見つけたので紹介します。

２　フォントの選択

まず、使用するフォントですが、紛らわしい数字やアルファベットを区別するだけならWindows標準の「Consolas」というフォントを使えば、別途フォントをインストールする必要がないことが分かりました。
次の図は、WindowsのChromeブラウザの標準フォント（メイリオ）で表示した例です。

これをConsolasで表示すると次のようになります。

標準フォント（メイリオ）でも、十分区別はつきますがConsolasにすると更に区別がつきやすくなっています。特にゼロとオーはメイリオで表示されている場合は単独だとどちらか判別しにくいです。ということで、フォントはConsolasを使います。

３　フォントの変更方法

後は、ブラウザのスタイルを変更するのですが、これをjavascriptで行うブックマークレットとして登録するというのが今回の方法です。
手順は簡単です。

（１）javascriptをコピーする

以下のjavascriptをコピーします。

javascript:void((function(){document.head.innerHTML+=”<style>*{font-family: ‘Consolas’ !important;}</style>”;})())

（２）ブックマークに登録する

ブックマークバーのなにもないところを右クリックして「ページを追加」をクリックします。

「ブックマークを編集」が表示されるので①ブックマークの名前を入力②コピーしたjavascriptを貼り付け③保存をクリックします。

ブックマークバーに「フォント変更」というブックマークレットが追加されました。

（３）フォントの変更方法

「フォント変更」ブックマークレットをクリックするとブラウザのフォントは「Consolas」に変更されます。（フォントを変更できないページもあります）ブラウザを再表示すれば元のフォントに戻ります。
次の動画は、数秒ごとにフォントを切り替えて表示しています。

このように、ブックマークレットにすることで、任意のタイミングで簡単にフォントを切り替えることができ、しかもブラウザの表示を更新すれば元に戻るのでとても手軽です。今でも時々はフォントを切り替えて表示したいことがあるので、このブックマークレットを登録しておいて損はないでしょう。