How to Sync Custom Fonts in Obsidian Across All Your Devices

If you’re using Obsidian Sync, you’ve probably noticed a frustrating limitation: your custom fonts on desktop don’t show up on your iPhone or Android device. This happens because mobile operating systems block apps from accessing “local” font files for security reasons.

The solution? Embedding your font directly into a CSS snippet using Base64 encoding. This method is safe, permanent, and works seamlessly across all devices.

Table of contents

The Problem

Standard CSS snippets usually “point” to a font file on your hard drive. Since your iPhone doesn’t have that file in its system folder, it defaults to system fonts like San Francisco or Arial.

The Solution: The Base64 Method

By converting your font into a Base64 text string, the font data lives inside the CSS file. Obsidian Sync moves the text file, and your phone reads the data as a font.

Step 1: Convert Your Font

We need to turn your .ttf or .otf file into a web-friendly format.

1. Go to Transfonter (https://transfonter.org/).
2. Upload your font file.
3. Settings:
   • Family support: On
   • Base64 encode: ON (This is the secret sauce).
   • Formats: Check WOFF2 only (This keeps the file size small and fast for mobile).
4. Click Convert and then Download.

Step 2: Create the Obsidian Snippet

1. Open the downloaded zip file and open stylesheet.css.
2. Copy the entire block of code (it will be a long string of random characters).
3. In Obsidian (Desktop), go to Settings > Appearance.
4. Scroll down to CSS snippets, click the folder icon, and create a new file named custom-font.css.
5. Paste your code into that file.
6. At the very bottom of the file, add this logic to tell Obsidian to use the font:

:root {
  --font-text: "YourFontName";
  --font-interface: "YourFontName";
}

Make sure YourFontName matches the name in the code you pasted above.

Step 3: Activate and Sync

1. In Obsidian Desktop, Refresh the snippet list and toggle your new snippet ON.
2. Open Obsidian on your iPhone.
3. Once synced, go to Settings > Appearance > CSS snippets and toggle it ON there too.
4. If it doesn’t change immediately, go to the Font settings in the app, tap Manage, and manually type in your font’s name.

Why This Works

This method is completely safe. CSS is a design language, not a programming language, so it cannot run arbitrary code or harm your device. By using WOFF2, we ensure the file is compressed and won’t slow down your mobile app.

The Base64 encoding technique embeds the entire font file as a text string within the CSS file itself. When Obsidian Sync transfers your CSS snippets, the font data travels with them. Your mobile device then decodes this Base64 string back into a usable font, bypassing the typical file system restrictions that prevent apps from accessing local font files.