Custom font in Obsidian on Android

Daniel Jonsson

Daniel Jonsson

— 1 min read

I'm using Obsidian for my notes. I like that it's just Markdown files under the hood, so I'm not locked into anything. If the developers behind Obsidian ever would start enshittification, it's easy to escape.

I'm using Obsidian on Linux, Windows and Android. And I wanted to change font in Obsidian from the default to Iosevka Etoile. On Linux and Windows it's easy to install custom fonts. But on Android, I don't know how you would do it. But I found another way to add custom fonts to Obsidian, which I will explain in this post.

  1. Download .woff2 files of the font that you want to use. In my case, I found .woff2 files of Iosevka Etoile at https://github.com/be5invis/Iosevka/blob/main/doc/PACKAGE-LIST.md.
  2. Convert the .woff2 files to Base64 encoded strings with https://hellogreg.github.io/woff2base/.
  3. In your Obsidian vault, create a file named .obsidian/snippets/fonts.css.
  4. Add this to the fonts.css file and add the Base64 encoded strings:
@font-face {
  font-family: "Iosevka Etoile";
  font-style: normal;
  src: url(data:font/woff2;base64,<data>);
}

@font-face {
  font-family: "Iosevka Etoile";
  font-weight: bold;
  src: url(data:font/woff2;base64,<data>);
}

@font-face {
  font-family: "Iosevka Etoile";
  font-style: italic;
  src: url(data:font/woff2;base64,<data>);
}

@font-face {
  font-family: "Iosevka Etoile";
  font-weight: bold;
  font-style: italic;
  src: url(data:font/woff2;base64,<data>);
}

@font-face {
  font-family: "Iosevka Etoile";
  font-style: oblique;
  src: url(data:font/woff2;base64,<data>);
}

@font-face {
  font-family: "Iosevka Etoile";
  font-weight: bold;
  font-style: oblique;
  src: url(data:font/woff2;base64,<data>);
}
  1. Open Obsidian, go to Settings > Appearance > CSS snippets, and enable "fonts".
  2. On the same Appearance page in Obsidian, you may now change the interface font, text font and/or monospace font.

Voilà! Now you have your custom font.

Read more