How to enable custom fonts in Obsidian Mobile

One of the challenges with note taking apps on mobile is the limited font selection. While desktops let you install custom fonts system-wide, mobile platforms are much more restrictive.

However, there’s an elegant solution for Obsidian given it’s an electron app. Obsidian allows you to inject a CSS snippet to tweak the appearnace of the app. CSS allows you to embed base64 encoded fonts directly in them for styling text 💡.

I figured let’s try this and see if it works on mobile. Works like a charm!

Here’s how to do it:

1. convert your font¹ file to base64 and store in the clipboard

# do this on a terminal app
base64 -i <path_to_font_file> | pbcopy

2. Create a new CSS snippet in Obsidian (Settings > Appearance > CSS snippets) and add your font declaration:

@font-face {
    font-family: custom-font-name;
    font-weight: 350 900;
    src: url(data:application/octet-stream;base64,<paste_base64_string_here>);
}

Remember to enable the snippet after creating it. Also font files can get large when converted to base64. So you’re not going to be able to type out that encoded string.

3. Activate custom font in Obsidian

Under Settings > Appearance > (Text|Monospace) Font, enter “custom-font-name”. It won’t show up in the dropdown but if you type the name exactly, you’ll see a checkmark after a second and your new font is enabled.

I typically do the above on my desktop and sync settings to my mobile. But nothing stops you from doing it directly on your mobile (if you don’t have sync enabled).

I now have my favorite reading font applied across my notes on mobile and my favorite monospace one applied to all the code in them!