ObsidianにGoogle Fontsを適応する

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

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

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

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

目次

Webフォントって何?

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

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

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

Obsidianに適応するメリット

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

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

Webフォント設定方法

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

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

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

https://fonts.google.com/

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

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

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

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

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

  • Regular or 400
  • Medium or 500

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

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

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

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

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

  1. 上のテキストボックスの2行目「@import url(‘使いたいフォント名’);」
  2. 上のテキストボックスの「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でコピーした項目を貼り付けて保存します。

6.CSSスニペットを読み込む

Obsidianに戻り、スニペットのリロードを押します。

リロードすると作成したCSSファイルが出てくるので、トグルをONにします。

ONにしたら、CSSが読み込まれてフォントが変更されます。お疲れさまでした。

読み込まない場合

設定ファイルのフォントを優先するため、「設定>外観」にあるフォント設定を消してください。

余談:複数のフォントを指定する

英数字のフォントと日本語フォントを分けたい時があります。

その際はGoogle Fontsで2個のフォントを選択。

1つ目のフォント選択後、右側のウィンドウを閉じることで、ほかのページに移動します。

1つ目のフォントと同じように、2個目のフォントを選択してください。

複数フォントの指定順

--override-font: 'フォント名';のフォント名を並べて記入します。

下記の形で左側に英数字フォント、右側を日本語フォントにします。

--override-font: '英数字フォント','日本語フォント';

<注意>
左側を日本語フォントにすると、英数字も日本語フォントになります。

おまけ:オススメフォント組み合わせ

どのフォントを選べばいいかわからない人のために、いくつか組み合わせを用意しておきました。

下記の組み合わせを使用するのもよし、日本語フォントだけ使うのもよし、組み合わせを変えるのもよし。

あなたの好みに合わせてカスタマイズしてみてくださいね!

Lato & Noto Sans JP

Nunito & M PLUS Rounded 1C

Roboto & BIZ UDP ゴシック

IBM Plex Mono & IBM Plex Sans JP

現在私が使っている組み合わせ。コードブロックが読みやすて好き。

最後に・参考サイト

https://blog.vrtmrz.net/2022/03/biz-udp-for-obsidian/

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次