🥷🏻 PROFILE🧬 BRAIN💨 WORK💭 BLOG🔗 STOCK📚 BOOK🎧 MUSIC
🥷🏻 PROFILE🧬 BRAIN💨 WORK💭 BLOG🔗 STOCK📚 BOOK🎧 MUSIC
page icon
HOME/💭BLOG/VSCodeのUIフォントをなんとかして変更したい

VSCodeのUIフォントをなんとかして変更したい

Created
2022/01/25
Category
Geek
Publish
slug
permalink
blog/
どうも。卒論発表4日前のやんぐたかです。
斧を磨いてから木を切りたいタイプなので、環境構築がやめられません。

Latoフォントが好き

僕は、Latoフォントが大好きです。このブログのフォントがそれです。
👾
好きすぎて、ブラウザのSidekickも、Stylusを使ってLatoで閲覧できるよう改造しています。
本当はLatoでコードを書きたかったのですが、等幅はマストということで、比較的似ている「SF Mono Square」を採用しました。
レポジトリ: delphinus/homebrew-sfmono-square
  • 半角・全角は幅がちょうど 1 対 2 になるようにグリフを調整。
  • 全角空白の可視化。
  • Nerd Fonts グリフの追加（いわゆる Powerline glyphs を含む）。
  • その他たくさんのグリフの調整。
要するに Ricty の SF Mono 版＋α というわけです
SF Mono を使って最高のプログラミング用フォントを作った話 - Qiita
みなさんターミナルは使ってますか？ Terminal.app？ iTerm2？ Hyper？ それとも他の何か？ それではフォントは何を使っていますか？ Menlo？ Consolas？ Ricty？ 今日はそんなお話です。 対象とする読者 ターミナルやエディタでカコイイ等幅フォントが使いたい人。 既存のフォントを FontForge + Python で色々いじって遊びたい人。 ずっと Ricty を使っていたのですが、色々こだわる余り自分でフォント作ってしまいました。作ったものをそのまま配布するのはライセンス上できませんが、 Homebrew で誰でも導入できるようにしています。 SF Mono Square には以下のような特徴があります。 要するに Ricty の SF Mono 版＋α というわけです。 SF Mono は最近の macOS, Xcode には標準で含まれています。気になるライセンスですが、フォントファイルはそれ自体を販売・配布しない限り、このように改変して利用することは問題ないそうです（Apple に問い合わせました）。これは SF Mono に限らず、macOS に含まれるフォント全てに当てはまります。太っ腹ですね。 以下、SF Mono Square を作成することになった経緯を述べ、そのあとに実際のフォントの作り方を載せていきます。 ターミナルやエディタを使う時、フォントには何を選択したらよいでしょうか。ここで（少なくとも僕が）重要と思うことを列挙してみます。 これは10人に聞いたら10人が賛成するでしょう。プロポーショナルなフォントでコーディングするなんて色々と無理です。 「作業」とは、コーディング以外にも、ログやドキュメントの閲覧も含みます。何よりも読みやすい文字であること、他の文字と混同しないことが求められます。具体的には、以下のような点は必須でしょう。 これらは多くの人が必須とするはずです。他、いくつかの「プログラミング用」フォントは、以下のような特徴を持つことを長所としています。 iTerm2 のように半角・全角に別のフォントを指定できるターミナルアプリもありますが、Terminal.app など、フォントを一種類しか指定できないアプリもまだ多いです。このようなアプリを使う場合、あるいは、単に見た目に統一感を持たせたい場合は、一つのフォントで半角・全角のグリフを持っていると嬉しいです。 M+ FONTS の M シリーズ、 Ricty、 更紗ゴシックなどが有名です。特に Ricty は他にない様々な特徴（後述）を持ったフォントで、一世を風靡しました。 これは 2.
https://qiita.com/delphinus/items/f472eb04ff91daf44274

余談

「Lato Code」といった改良されたフォントも落ちていましたが、流石に等幅ではなかったどす…

先行事例

これからたくさんにらめっこするであろう、VSCodeちゃん。 UIフォントだけでもLatoにしたかったので、たくさんググってみました。
僕が観測した限り、UIフォントを変更しようとしたのはこの方のみ。

原理

このブログによると、
VSCode は HTML・CSS・JavaScript (Node.js) で構成された Web ベースの Electron アプリです。
ほぼ全ての UI が HTML と CSS で作られているため、VSCode 内の圧縮された CSS ファイル内の font-family を書き換えれば UI フォントを変更できます。
とのことなので、強引に変更できるみたいです。

変更方法（Mac版）

この方はWindowsユーザーのようですが、ここではMacユーザー向けに書いていきます。
  1. 変更するファイルにアクセス
      2. VSCodeには、4つのファイルでのfont-familyの指定があるようです。
    1. workbench.desktop.main.css
        2. Plain Text
    2. workbench.desktop.main.js
        3. Plain Text
    3. processExplorerMain.css
        4. Plain Text
    4. issueReporterMain.css
        5. Plain Text
      パスからアクセスしても良いですし、
      アプリケーション→VScodeを右クリック→パッケージの中身を覗く
      とかでもいいでしょう。
  1. フォントファミリーを変更する
      2. 何かしらのエディタ、それこそVSCodeでフォント指定を変更していきましょう。
      ズラーッとcssが書かれていますが、「Hiragino」などでサーチしてみると、フォントを指定している場所が見つかります。
      ここでは、「mac:lang(ja)」「Linux:lang(ko)」のようにOSと言語ごとにフォントを決めているようなので、「mac:lang(ja)」の直後に「Lato」をドカンと置いてあげましょう。
      workbench.desktop.main.css
      workbench.desktop.main.css
      workbench.desktop.main.js
      workbench.desktop.main.js
      processExplorerMain.css
      processExplorerMain.css
      issueReporterMain.css
      issueReporterMain.css
      👾
      これって、「'」（もしくは「"」）つけたほうがいいのでしょうか、、？郷に従ってつけたりつけなかったりしてるのですが…。 一応つけなくてもイケてる気がするのですが、お決まりがよくわかんないです…
       

デメリット

  1. 「Code インストールが壊れている可能性があります。再インストールしてください。」という表示がでる。
      2. A. 設定アイコンから「再度表示しない」で無視を決めましょう。
  1. タイトルに「[サポート対象外]」と表示されるようになる。
      2. A. 無視を決めましょう。
  1. アップデートのたびに、CSSファイルも上書きされるので、再度変更しないといけない（らしい）
      2. A. 頑張りましょう
      PS. 参考元さんは、一括変換や自動化のスクリプトを作成・公開されています。Windows版ですがパスとか変えたらMacでもうまくできるかと〜。
それでは、GOODなLatoライフを。
Twitterでシェア
HOME/💭BLOG/VSCodeのUIフォントをなんとかして変更したい