ObsidianにGoogle Fontsを適応する

2023年4月21日2023年5月17日

こんにちは、相戸ゆづなです！

Obsidianはフォントを変更できますが、端末に入っているフォントだとしっくりこない人がいるのではないでしょうか。

今回は「Google Fonts」を使ってフォント設定の幅を広げていきたいと思います。

今回の記事は応用編になります
基本のフォント設定に関しては下記の記事からどうぞ

Webフォントって何？

インターネット上で提供されているフォントを呼び出して表示する機能です。

中でも「Google Fonts」は無料で使えるサービスなため、一押しのサービスです。

（他のサービスは有料になっていることが多い）

Obsidianに適応するメリット

どの端末でも同じWebフォントを読み込むため、フォント表示を統一できます。

とくにヒラギノ角ゴシックが入っていないWindowsとAndoroidに有効です。

Webフォント設定方法

大まかな流れは下記の通りになります。

Google Fontsで使いたいフォントを選ぶ
使いたいフォントの太さを指定
@importとfont-familyに記載されているフォント名をコピー
Obsidianのスニペットファイルを作成
CSSでスニペットを記述する
スニペットを読み込む

1.Google Fontsで使いたいフォントを選ぶ

https://fonts.google.com/

上記のサイトに移動し、使いたいフォントを探します。

Languageで「Japanese」を選択すると、日本語フォントが選べます

2.使いたいフォントの太さを指定

使いたいフォントを見つけたらクリックし、画面をスクロールします。

スクロールするとフォントの太さの一覧が出てくるので、下記の太さを選択します。

Regular or 400
Medium or 500

両方の表記をしているものもあれば、片方だけの表記のものもあります。太さはお好みで。

太さを決めたらSelectを押して決定しましょう。

3.@importとfont-familyに記載されているフォント名をコピー

太さを決定したら、右側からウィンドウがにゅるっと出てきます。

<link>と表記してあるボタンを@importにチェックを変更し、下記の2項目をコピーします。

上のテキストボックスの2行目「@import url(‘使いたいフォント名’);」
上のテキストボックスの「font-family: ‘使いたいフォント名’,sans-serif;」のフォント名部分

4.Obsidianのスニペットファイルを作成

Obsidianを起動して、「設定＞外観」の順に移動します。

その後、スクロールしてCSSスニペットの項目まで移動したら、フォルダアイコンをクリック。

エクスプローラーかFinderが起動したら、そのフォルダーの中にCSSファイルを作成します。

エクスプローラーかFinderで直接
「Obsidian保管庫＞（設定フォルダー）＞snippets」の中に直接ファイルを作ってもOK

5.CSSスニペットに記載する

4で作ったCSSに下記の項目を記入します。

/*Google Fontsでコピーした@importを貼り付け*/
@import url('@importで出たCSS名'); 

: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: 'フォント名';/*CSS rules の''で囲われた部分を貼り付け*/
    }

.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;
}

@importと--override-font: 'フォント名';の部分に、3でコピーした項目を貼り付けて保存します。