CG・プログラミング・AIとかについてのメモ

Obsidianで漢字・かな・英数字などの文字種ごとに異なるフォントで表示するCSSスニペット

20260916_183614-1.jpeg

はじめに

ObsidianのUIや本文のテキストを、「ひらがな・カタカナ・漢字はフォントA」「英数字はフォントB」など、文字種によって異なるフォントを割り当てて表示する方法の説明です。CSSスニペットを書くことで、デザイン用語でいう合成フォントのような表示ができます。

Obsidianで複数フォントを組み合わせた表示

私のObsidian環境ではメインの表示フォントとして、Windowsシステムフォントに含まれている 「UD デジタル教科書体 NK-B」（UD Digi Kyokasho NK-B） を使用しています。

2026-09-21_22h58_05.jpg

「UD デジタル教科書体 NK-B」 のひらがな・カタカナ・漢字は美しくて読みやすいのですが、以下のように困る点もあります。きちんとした思想のもとに作られた書体らしいので、私の用途に合っていないだけですが。

  • 和文と欧文が混在していると間延びして見え、やや読みにくい。
  • 0（ゼロ） と O（オー）、１（イチ） と l（エル） などが見分けにくい。特に １（イチ） がただの棒なのは看過できない。
20260916_183614-4.jpg

これらをカバーするために、 「半角のスペース・英数字・記号 ＋ 全角スペース」 の部分を、プログラミング向けに見やすく調整されたフォント 「UDEVGothic35-Bold」 に差し替えています。半角の 0 や 1 が見分けやすくなり、半角スペースと全角スペースの違いもひと目でわかるようになっています。

20260916_183614-3.jpg

このようなフォントの割り当てはObsidianの標準設定だけではできませんが、CSSスニペットを書くことで柔軟に指定できます。

CSSスニペットの内容

使用しているCSSスニペットから、フォント指定部分を切り出したものです。以下で各部分を説明します。

@font-face { /* この内容のフォントをこの名前で呼び出すぞ、という定義を作成 */
  font-family: 'Ascii-Plus'; /* わかりやすい名前をつける */
  src: local('UDEVGothic35-Bold'); /* 元になるフォント */
  unicode-range: /* 使用する文字の範囲 */
  U+0020,
  U+0021-002F, U+0030-0039, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E,
  U+3000;
}

body {
  --default-font: 'Ascii-Plus', 'UD Digi Kyokasho NK-B'; /* 和文用フォントを後に書く */
  --font-monospace: 'UDEV Gothic 35';
  --font-interface-theme: var(--default-font);
  --font-text-theme: var(--default-font);
  --font-reveal: var(--default-font);
  --r-main-font: var(--font-reveal);
  --r-heading-font: var(--font-reveal);
  --font-mermaid: var(--font-monospace);
}

フォントの割り当て範囲を決める

  1. まず、それぞれのフォントで表示する範囲を決めます。わかりやすくするために和文用・英文用と呼びます（全角スペースのせいで厳密には違うのですが）。
    • 英文用： 半角のスペース・英数字・記号 ＋ 全角スペース
      • UDEVGothic35-Bold
    • 和文用: 上記以外のすべての文字
      • UD デジタル教科書体 NK-B （UD Digi Kyokasho NK-B）
  2. フォントを差し替えたい文字の範囲の Unicode をメモしておきます。私の利用例では以下の通りです。 
    U+0020 /* 半角スペース */
U+0021-002F /* 半角記号 */
U+0030-0039 /* 半角数字 */
U+003A-0040 /* 半角記号 */
U+0041-005A /* 半角英大文字 */
U+005B-0060 /* 半角記号 */
U+0061-007A /* 半角英小文字 */
U+007B-007E /* 半角記号 */
U+3000 /* 全角スペース */

@font-faceで指定範囲の文字だけをまとめる

VS CodeやテキストエディタなどでCSSスニペットを記述します。最初に、使用範囲が狭いほうの 英文用 について @font-face を書きます。

@font-face { /* この内容のフォントをこの名前で呼び出すぞ～という宣言 */
  font-family: 'Ascii-Plus'; /* わかりやすい名前をつける */
  src: local('UDEVGothic35-Bold'); /* 元になるフォント */
  unicode-range: /* 使用する文字の範囲 */
  U+0020,
  U+0021-002F, U+0030-0039, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E,
  U+3000;
}
  • font-family: このフォント定義を判別するためのわかりやすい名前。アスキー文字のほかに全角スペースを含んでいるので 「Ascii-Plus」 という名前にしました。
  • src: ベースとして使用するフォント名。PCにインストールしてあるフォントなので local() で指定しています。GoogleフォントなどのWebフォントを指定した場合はネットへのアクセスが発生します。
  • unicode-range: 使う文字の範囲をUnicodeで指定します。

イメージ的には、 「UDEVGothic35-Bold」 というフォントに含まれているすべての文字データから、unicode-range に書いてある範囲の文字だけを集めて 「Ascii-Plus」 という名前の新しいフォントを作成したような感じです。

20260916_183614-10.jpg

表示フォントを指定する

実際にテキストが表示されるときのフォント指定を書きます。 :rooｔ など色々試したのですが、私の環境では body 要素内に書くのが良いようです。以下に詳細を記します。

body {
  --default-font: 'Ascii-Plus', 'UD Digi Kyokasho NK-B'; /* 和文用フォントを後に書く */
  --font-monospace: 'UDEV Gothic 35';
  --font-interface-theme: var(--default-font);
  --font-text-theme: var(--default-font);
  --font-reveal: var(--default-font);
  --r-main-font: var(--font-reveal);
  --r-heading-font: var(--font-reveal);
  --font-mermaid: var(--font-monospace);
}
  1. デフォルトフォントの変数を指定 
    --default-font: 'Ascii-Plus', 'UD Digi Kyokasho NK-B'; /* 和文用フォントを後に書く */
    • --default-font という変数に、Obsidianの表示にデフォルトで使用するフォント名を書きます。
    • 以後は --default-font と書けばここで指定されたフォントが使われるので、各部分で使用フォントが統一でき、何度も同じ設定を書かずに済みます。Obsidianのテーマにはこのような変数がたくさん使われています。20260916_183614-11.jpg
    • @font-faceで定義しておいた英文用の Ascii-Plus を先に、 和文用の UD Digi Kyokasho NK-B を後に書きます。
    • Obsidianが文字を表示する際は、まず行の先頭に書いてあるフォントを使って表示を試みます。このフォントで表示できない文字があれば、後に書いてあるフォントで表示することを順番に試します。20260916_183614-13.jpg
    • その結果、 「半角のスペース・英数字・記号 ＋ 全角スペース」 は先頭に書いてある Ascii-Plus で表示され、 Ascii-Plus に含まれていない 「その他のすべての文字」 は、次に書いてある UD Digi Kyokasho NK-Bで表示されるというわけです。
  2. フォント設定に変数を書く
    • 合成フォント風の表示とは直接関係ないですが、モノスペースフォントの変数も一緒に書いています。 
      --font-monospace: 'UDEV Gothic 35'; /* モノスペースフォント */
    • 続けて、フォント関係の変数に、指定した変数を代入します。 
      --font-interface-theme: var(--default-font); /* UI表示用フォント */
--font-text-theme: var(--default-font); /* ノート表示用フォント */
--font-reveal: var(--default-font); /* スライドショー用フォントの変数に代入 */
--r-main-font: var(--font-reveal); /* スライドショー用メインフォント */
--r-heading-font: var(--font-reveal); /* スライドショー用見出しフォント */
--font-mermaid: var(--font-monospace); /* mermaid記法用フォント */
  3. スニペットファイルに .css 拡張子をつけて、Obsidian保管庫内のスニペット用フォルダに保存します。デフォルトの場所は .obsidian/snippets になっていると思います。

CSSスニペットの適用

Obsidian本体のフォント設定を削除する

CSSスニペットはObsidian本体のフォント設定よりも後に読み込まれるため、フォントの指定が競合した場合、スニペット側の指定が優先されるようです。しかし、本体のフォント設定のほうがスニペットよりセレクタの詳細度が上回っていたりして意図通りの表示にならない経験がありました。干渉を防ぎ、詳細度について悩む必要をなくすため、本体側のフォント設定は削除してあります。

20260916_183614-15.jpg

スニペットを有効にする

  1. Obsidianの設定から 「外観 ＞ CSSスニペット」 を開きます。
  2. 更新ボタンを押します。 20260916_183614-16.jpg
  3. 目的のCSSスニペットが一覧に表示されたら、トグルスイッチをオンにします。 20260916_183614-17.jpg
  4. CSSスニペットの記述がノートの表示に反映されます。

おわりに

使用テーマや他のスニペットの記述によっては書き方を変更する必要があるかもしれません。表示がおかしくなった場合は、スニペットをオフにすれば元通りになります。