
いくらやってみても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ファイルの中身が表示されます。
これがあなたの.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のファイルが書き込み可能な状態で出てくるはずです。
ちなみに私はテキストエディタの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{…} |
結構ありますね😓。
ここは設定不要とか、この名前無い!とかあるかもしれませんが、うん。不要ということで、大丈夫でしょう。
そこは無視しちゃって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; }
(デフォルトで用意されている “Robot Mono” のフォントを代用していたので、それが書かれている箇所に“Ricty Diminished”を書けば良いんだと判断しました)
おっしゃー完了だぁぁ!
お疲れ様です。
以上のプロセスを経てJupyter Notebookを起動してみると次のようにRicty Diminishedがきちんと反映されてました!
おっしゃ〜!
いやぁ〜今まで何回もトライしたのですがその都度失敗して、ほんで今思い出してやってやったらできました。
Pythonやる環境として人気のあるJupyter Notebook。
こだわってフォントも変えたいですよね!
私は満足でございます。
今回の記事でうまくJupyter NotebookにRicty Diminishedを反映させられた方が1人でも増えることを願っております。