Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?
Organization

Chrome OS,code-serverでカスタムフォントを使う

↑Chromebookでcode-serverをセットアップするにはこちら

この記事では,フォントをインストールできないChrome OSを使っている皆様でも,カスタムフォントを使用する方法を紹介します.デベロッパーモード等は使用しません.CrostiniのみでOKです.

image.png

image.png

image.png

やってみる

やってみよう

フォントを落とす

好きなフォントを落としてください.今回はpowerline

$ git clone https://github.com/powerline/fonts.git

フォントをコピー

code-serverのホスト用ディレクトリに移動し,そこへコピーします.

$ cd /usr/lib/code-server/src/browser/media
$ sudo cp /path/to/file.otf ./ 

vscode.html編集

編集する準備をします

$ cd ../pages # /usr/lib/code-server/src/browser/pages
$ sudo cp vscode.html vscode.html.old

<head>タグ内に<style>タグを作成し,以下のようにしてください.

vscode.html
...
<head>
...
    <style>
        @font-face {
           font-family: "任意のフォントファミリー名";
           src: url("{{CS_STATIC_BASE}}/src/browser/media/file.otf");
        }
    </style>
</head>
...

code-serverのページリロード / 設定

ページをリロードし,Ctrl + ,で設定を開く.editor.fontfamily(ターミナルであればterminal.fontfamily)と検索窓に入れ,先程の任意のフォントファミリー名を追加する

以下はfiracodeの場合

image.png

入力窓からフォーカスを外すと瞬時に反映される.されれば成功.やったね.

image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?