Obsidianでモリサワ BIZ UDなど任意のフォントを使う

どうも、お久しぶりです。vorotamorozです。本当に久しぶり。
書きたいことも溜まっているのですが、時間がいよいよ欠乏しています。

さて。以前使い始めたObsidian。完全に自分の生活の一部になっています。
作ったプラグインは結局

• Self-hosted LiveSync
• TagFolder
• Screwdriver

と3つになってきて、関連するプロジェクトも

• LiveSync-classroom
• self-hosted-livesync-server

と増えてまいりました。

これはいずれしっかり書きますね。

今回は、Obsidianに好きなフォントを設定する方法。

※一部CSS効いてなかったので修正しました。(2022.03.26)
あと、下の方にScrewdriverで一発で設定できるファイル載せてます。

最近、色々な書き物にBIZ UDを使い始めました。これが非常に快適です。
せっかくなので、これをObsidianでも使用できるようにフォント設定したい。そんなニーズを満たしてみました。

設定するには、CSS Snippetsを使用します。
Vaultの下の、.obsidianフォルダにsnippetsというフォルダを作成し、ここにwebサイトのデザインよろしくCSSを置いていきます。
とはいえ適用したいCSSのみで構いません。テーマよりはるかに楽ですね。

たとえば、WindowsでBIZ UDゴシックを使用するのであれば、下記のような感じになります。

:root {
    --default-font: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    --editor-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    --override-font: "BIZ UDPゴシック";
}
.cm-line,.CodeMirror-lines {
    font-family: var(--override-font), -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

.markdown-preview-view {
    font-family: var(--override-font), -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

これをたとえば、font_jp.cssとして配置すると、Settings->AppearanceのCSS Snippetsにスイッチが表示されるようになり、ONにするとぱっとフォントが変更されます。

ただし、この方法ではデバイスにBIZ UDゴシックが入っていないと表示できません。また、Windowsに同梱されているフォントはあくまでWindowsで使用するためのフォントのため、コピーすることはできません。
フォントライセンスは非常に厳しいことが多いです。慎重にライセンスを確認し……と、先日までは続けなければいけなかったところでしたが、つい先日モリサワがBIZ UDゴシックをOSSで公開しました。これは衝撃ですね。非常に難しいと言ったフォントライセンスも、SIL Open Font Licenseと非常にわかりやすいライセンスが選定されています。
という事で、BIZ UDゴシックを使用します。Obsidian向けのCSSとして変換済フォントの再配布もしちゃいましょう¹。

フォントファイルの変換

まず、このフォントはttf形式のファイルとして配布されています。そのため、ObsidianというかWebではそのまま使用できません。
Obsidianでは、woff形式のフォントに一手間加えたものが使用できます。

色々ツールはあるのですが、武蔵システムさんのWOFFコンバータが一番簡単です。
深いことを考えずに使えるアプリケーションで、やることは変換前ファイルにBIZUDPGothic-Regular.ttfをドラッグ&ドロップして、「変換開始」ボタンを押すのみです。簡単ですね。
そうすると、BIZUDPGothic-Regular.woffというwoff形式のフォントファイルが生成されます。

単なるweb向けであれば、woffファイルをそのまま使用すれば良いのですが、Obsidianで使用するためにはCSSファイルに埋め込む必要があります。
そこで、このファイルを、DataURIに変換します。これも道具は何でも良いのですが、以前僕が作った変換ツールは下記になります。
DATAURI Encode Tool
ぽいっと放り込むと勝手に変換が行われます²

変換されたOpen BIZUDP... をクリックすると、data:application/から始まる長ーいURLが作成されます。
これを、下記のように使用します。

@font-face {
    font-family: "BIZUDPCONVERTED";
    /* ↓ここにフォントを入れる */
    src: url("data:application......==") format('woff2');
}

:root {
    --default-font: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    --editor-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    --override-font: "BIZUDPCONVERTED";
}
.cm-line,.CodeMirror-lines {
    font-family: var(--override-font), -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

.markdown-preview-view {
    font-family: var(--override-font), -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

これで、あらゆる端末でBIZ UDゴシックを使用して、ノートが取れるようになります。

ただ、このCSSファイルですが、モバイルに持って行くのがなかなか面倒。結局iOSで.snippetsにファイルを置く方法はイマイチわかってません。
そこでScrewdriverを使用します。

Screwdriverでねじ込む

まずひな形を下記のような形で作って、

---
target: .obsidian/snippets
ignores:
- /node_modules
- /.git
filters:
- _OSS\.css
---


# .obsidian/snippets/Obsidian_BIZUDPGothic_OSS.css 

```.obsidian/snippets/Obsidian_BIZUDPGothic_OSS.css

```　

コードブロックの中にCSSを貼り付けます。
(貼り付けたものはgistに置いておきます)

そしてコマンドパレットからScrewdriver: Restore filesを実行すると、なんと。一瞬でCSSファイルを.obsidian/snippetsフォルダに入れることができます。
ちょうど、このスクリーンショット動画と同じですね。

あとはSettings->AppearanceでObsidian_BIZUDPGothic_OSSにチェックを入れると、読みやすいBIZ UDゴシックをObsidianで使用できます。

ぜひ一度お試しください。イチオシフォントです。