Jupyter NotebookでRicty Diminishedのフォントを使いたいの!!

JupyterとRictyプログラミング

 

いくらやってみてもJuypter NotebookにRicty Diminishedのフォントが設定出来ない!!

 

 

Jupyter NotebookにRicty Diminishedのフォントを設定する。

私だってあの記事この記事あたりましたよ

 

しかし…

いつになってもRicty Diminishedが反映されない!!

 

これに挑戦しては毎度毎度諦めて終わってました。

 

それから一年近く経って、ようやくJupyter NotebookにRicty Diminishedを設定することができたのでそのやり方・問題解決法を解説させていただきます。

 

今回で決着つけましょう!

 

スポンサーリンク

Ricty Diminishedのフォントダウンロードはオッケーですよね

この記事を見ている方は、きっとRicty Diminishedインストールが出来ている方だと思うので今回はこの部分はしょりますね。

 

一応Ricty Diminishedのインストール方法を解説した、ドットインストールさんのリンクを貼っておきます👇

 

 

たぶんRicty Diminishedのインストールに関してはこれが一番わかりやすいです。
(私がまだパソコン未熟者だった頃大変お世話になりました)

 

では次からは、Jupyter NotebookにRicty Diminishedのフォントを設定していく過程でぶつかる問題とその解決策、そして最終的には晴れてRicty Diminishedの設定が完了するまでをお話ししてゆきます。

 

custom.cssのファイルはどこにある?

 

.jupyter/custom/custom.cssに追記するんでしょ。知ってるよそんなん。

じゃーそのファイルはどこにあるんじゃ?

 

 

元々そのファイルが無かったから、自分でcustom.css作ってその中にRicty Diminishedを反映させるcss書いたけどやっぱり反映されないやー

 

たぶんこれらの問題が生じていると思います。

 

まず、”元々このファイルが無い”ということはあり得ないんじゃないかな?

 

だから、自分でcustom.cssを作ってcssの記述をしてもRicty Diminishedが反映されないんだと思います。

 

だからと言って、.jupyter/custom/custom.cssを探してみても見つからない…

 

安心してください。このファイルを一発で引き出してくる方法があります

たった2stepです。

 

step1. GoogleのURL検索欄で「~」のみを入力してEnterキーを押してください。

するとユーザディレクトリがズラッと出てきます。(ok ok…)

 

step2. 今の状態で、そのURL欄に続けて .jupyter/custom/custom.css を書き加えて、Enterキーをポチッ!

出てきましたか?

cssファイルの中身が表示されます。

 

custom.css

 

これがあなたの.jupyter/custom/custom.cssです。

 

ここまでで、とりあえず.jupyter/custom/custom.cssというファイルを見つけ出すことができました。

 

 

まだ、Googleはそのままにしておいてください!

 

URL検索欄のウィンドウも閉じずにキープ。

あとでまた出てきますので。

 

次はこれに追記していき、いよいよJupyter NotebookにRicty Diminishedを反映させますよ。

 

custom.cssに書き込む方法

なぜかわかりませんが、このcustom.cssってFinderで(Mac使用者)いくら探しても見つからないんですよ。

 

なのでこのcutom.cssのファイルに書き込むために、まずどうやって開くか?なのですが、次のように開けます。

 

先ほどのURL検索欄で、

/Users/ユーザ名/.jupyter/custom/custom.css

がありますよね。

 

私の場合は

/Users/yamadayuuko/.jupyter/custom/custom.css

です。

 

そしたら、そのURLを

右クリック → サービス → 開く

と進んでください。

 

(/Users/ユーザ名/.jupyter/custom/custom.cssを右クリック→サービス→開く)

custom.cssサービス

 

URLの右クリックで、「file://」まで含んで右クリック → 開く としても反応しないです!

エディット的なやつでcustom.cssのファイルが書き込み可能な状態で出てくるはずです。

ちなみに私はテキストエディタのAtomで開かれるようです。

 

はい、というわけで、長くなりましたが、cutom.cssに追記ができるようになりました。

 

やっとです。やっと、font-familyにRicty Diminishedを設定します。

お待たせしました。

 

font-family : Ricty Diminishedを書こうぜ!

他の方のやり方を見てみると…

 

CodeMirror pre {
font-family: "Ricty Diminished";
font-size: 13pt !important;
line-height: 120% !important;
}

 

をただcustom.cssに書き加えれば良いみたいに言ってますが、私はそれでもJupyter Notebookに反映されませんでした。

 

実を言うと、font-family:Ricty Diminishedをcssの”各箇所に”書かなくちゃいかんのです。

 

つまり、上のあのひとパーツをcustom.cssに追記するだけでは、Jupyter NotebookにRicty Diminishedが反映されません。

 

ゴチャゴチャ言うのも面倒なので結論を言います。

 

以下に挙げるクラス名・id名や@規則名の中の、font-familyにRicty Diminishedを追記してください。(ここら辺は少しCSSの知識が必要になるので例も示しますね。)

 

※{ }の中にcssの記述をします。

※クラス名等がまとめて書かれているところもありました。

@font-face{…}
div.prompt,
.prompt{…}
div.output_subarea.output_text.output_stream.output_stdout,
div.output_subarea.output_text{…}
div.output_area pre{…}
div.output_html{…}
div.out_prompt_overlay.prompt{…}
div.text_cell,
div.text_cell_render pre,
div.text_cell_render{…}
div.cell.text_cell.rendered .prompt{…}
div.cell.text_cell.unrendered .prompt{…}
div.rendered_html code{…}
.well code,
.code{…}
div.rendered_html pre{…}
div.font-family pre,
div.text_cell_render code{…}
.kse-input-group-pretty > kbd{…}
.kse-input-group-pretty > kbd{…}
input.raw_input{…}
div.CodeMirror,
div.CodeMirror pre{…}
.ipython_tooltip{…}
.ipython_tooltip .tooltiptext pre{…}
.cm-s-ipython.CodeMirror{…}
.cm-s-ipython.CodeMirror{…}

 

これらのクラス名などがどうやって分かったのか?というと、”Googleの検証”です。Googleの検証機能を使うことで、「この部分のクラス名はこれなんだぁ〜」と分かりますよ。

 

結構ありますね😓。

 

ここは設定不要とか、この名前無い!とかあるかもしれませんが、うん。不要ということで、大丈夫でしょう。

そこは無視しちゃってOKです!

 

(例)(多少文字が異なるかもしれませんが大丈夫!)

 

ー@font-faceでRicty Diminishedを設定する場合ー

@font-face {
font-family: "Ricty Diminished", "Roboto Mono";
font-weight: normal;
font-style: italic;
src: local('"Roboto Mono"'), url('fonts/roboto-italic.ttf') format('truetype');
}

 

ー.ipython_tooltipでRicty Diminishedを設定する場合ー

.ipython_tooltip {
font-family: "Ricty Diminished", "Roboto Mono", monospace, monospace;
font-size: 13pt;
line-height: 130%;
border: 2px solid #21262c;
background: #323a44;
background-color: #323a44;
border-radius: 2px;
overflow-x: visible;
overflow-y: visible;
box-shadow: none;
position: absolute;
z-index: 1000;
}

 

“Ricty Diminished” のように、必ずダブルクオーテーション「”」で囲ってください!

 

custom.cssのファイル

 

 

(デフォルトで用意されている “Robot Mono” のフォントを代用していたので、それが書かれている箇所に“Ricty Diminished”を書けば良いんだと判断しました)

 

おっしゃー完了だぁぁ!

お疲れ様です。

 

以上のプロセスを経てJupyter Notebookを起動してみると次のようにRicty Diminishedがきちんと反映されてました!

 

rictyの反映

 

おっしゃ〜!

 

いやぁ〜今まで何回もトライしたのですがその都度失敗して、ほんで今思い出してやってやったらできました。

Pythonやる環境として人気のあるJupyter Notebook。

こだわってフォントも変えたいですよね!

私は満足でございます。

 

今回の記事でうまくJupyter NotebookにRicty Diminishedを反映させられた方が1人でも増えることを願っております。

 

 

 

 

 

 

 

 

 

 

 

 

 

コメント

タイトルとURLをコピーしました