いくらやってみても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人でも増えることを願っております。
コメント