Productivity Hacks

Obsidianのフォントを変更する Customizing Fonts in Obsidian: A How-To Guide

World Administrator
2023年8月25日
2 分で読めます
Tech For YouObsidian
Photo by Sven Brandsma / Unsplash

Obsidianでは日本語の表示がきれいではありません。そのため最初にフォントの設定を済ませる必要がありますが、Obsidianでフォントを変更する方法を検索するとテーマを変更したり、そもそもテーマを変更したりとやりたいことに対してやっていることが大げさすぎます。

フォントを変更目的別に最適なフォントの変更方法をここではっきりさせておきます。

パソコンに入っているフォントを使う

利用したいローカルフォントがすでに用意されていている場合はこの方法を利用することができます。

  1. Settings
  2. Appearance
  3. Font

から変更したいフォントを指定すればいいです。

CSS Snippetsを利用して変更する

前提としてエディターが必要になります。こだわりがなければVisual Studio Codeをインストールしましょう。

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

CSS Snippetsを利用することで、Google Fontsからフォントを読み込んで利用することができます。

まずはGoogle Fontsから使いたいフォントを探しましょう。

日本語をメインに使用するのであればNoto Sans JPなどがいいでしょう。フォントの太さを選択する必要がありますが、通常用とであるならばRegular 400を選択しましょう。+ボタンを押すと右上のアイコンから選択したフォントファミリーを利用するためのコードが自動的に生成されます。@importを選択し、生成された2つのコードをまるっとコピーし、どこかにメモ代わりにペーストしておいてください。

Obsidianに移動して設定画面を開きましょう。

  1. Settings
  2. Appearance
  3. CSS snippets

から変更することができます。

フォルダーのアイコンをクリックすることで、Obsidian VaultのSnippetsフォルダーが開かれます(存在していなかった場合は自動的に生成され、開かれます)。

私はスニペットであれ何であれ機能はコンポーネントとして可能な限り分離していきたいので、fonts.cssというファイルを新規作成し、このファイルにフォントの設定を書き込んでいます。

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital@0;1&display=swap');

* {
	font-family: 'Atkinson Hyperlegible', sans-serif;
}

先ほどコピーした1つめのコードから<style>...</style>の部分を削除してコピーしましょう。

また、どの部分にフォントを適用するのか指定する必要があります。わかっている人はその要素やクラスを指定してください。よくわからない人は私のコードのように指定してください。

* {
    font-family: 'Atkinson Hyperlegible', sans-serif;
}

*で全要素を指定することができます。

フォントの適応要素をクラスや疑似クラスで指定しようとも思いましたが、面倒なので全要素に対して指定しています。インターフェースを含め、すべてが同じフォントになるので統一感という意味では完璧になります。

今回私が利用しているフォントはAtkinson Hyperlegibleというフォント(このブログで利用しているフォントです)で可読性が高く、非常に多くの言語に対応している特徴があります。日本語、英語、中国語などそこそこ多言語でメモを書くため、私はこのフォントを利用しています。

Atkinson Hyperlegible, named after the founder of the Braille Institute, has been developed specifically to increase legibility for readers with low vision, and to improve comprehension.Having a traditional grotesque sans-serif at its core, it departs from tradition to incorporate unambiguous, distinctive elements—and at times, unexpected forms—always with the goal of increasing character recognition and ultimately improve reading.To contribute, see github.com/googlefonts/atkinson-hyperlegible.
💡
CSS snippetsを作った後は有効にすることを忘れないようにしましょう。

Google Fontsを利用することのメリットの一つに多言語に対応したフォントを利用しやすいことがあると思います。フォントのフォールバックを指定することでも解決できますが、面倒なのでこのようにしています。

テーマを変更する・作成する

テーマとは統一的な見た目を提供するための設定群です。

フォントを場所によって変更することは一般的ではありませんし、オリジナルなテーマを作る労力と既存のテーマの全容を理解してからフォントを変更することのどちらも非常に面倒です。

Obsidianの見た目を完全に変更したいのであればテーマを作ってもいいかもしれません。