Adding a custom font to Android/iOS

Share & showcase
1

Hi, I want to share how I added a custom font to Android/iOS devices. This technique employs Obsidian’s CSS snippet feature so you do not need to install or create a custom theme.

  1. You need a WOFF2 file for your custom font. If you only have TTF file or something, convert them to WOFF2. There are plenty of tools online to do this.

  2. Convert WOFF2 to base64-encoded string and embed it in fonts.css file (you can name this file as you want). You can do this on https://hellogreg.github.io/woff2base/. Copy the generated string to your CSS file.

  3. Add your fonts.css under .obsidian/snippets/ folder.

  4. Open Obsidian and go to Settings > Appearance > CSS snippets and enable your fonts.css.

  5. Now Obsidian will recognize your custom font even if your phone does not have it. You can go to Settings > Appearance > Font and change the font to yours.

If Obsidian does not recognize your font, check the font-family property in your fonts.css. font-familiy property and Settings > Appearance > Font setting must exactly match.

10 Likes
2

Cool! Tho iOS does have an established (admittedly arcane) way to install system fonts.

3

This is very useful for Samsung devices, because they do not allow installing system fonts (unless you buy one for $4.00 in the Galaxy Store arrrgggh).

I am a bit confused about this, though. I have always used encoded TTF files for snippets and they have always worked.

1 Like
4

I thought CSS only accepts WOFF2, but TTF and other formats seem to work just fine. Ty for sharing.

5

It didn’t work on me. I am using samsung. I don’t know if it is my css file is wrong or not but i am really hopeless😔

6

Which font do you want to embed? I’ll give you an example file and you can test it.

1 Like
7

I came up with the same solution. This is the most reliable way of adding custom font.

1 Like
9

I have now created a dedicated Obsidian Publish page for tracking this issue, down to its potential and user-friendly resolution in future, hopefully:

10

@621 Hey there. I’m trying to set up a custom font on iOS using the technique you came up with, but have run into an odd issue. For some reason the font I’m trying to use (Karla) keeps showing up as bold/italic across all of my notes in Obsidian. Using Woff2Base: Convert .woff2 to accurate Base64 css., I’ve tried:

  • Generating CSS snippets from woff2 files
  • Generating CSS snippets from TTF files
  • Using a single CSS file that contains the snippets for regular, bold, and italic fonts (this led to the font being italic globally)
  • Using a CSS file that contains the snippet for only the regular font

The last configuration I tried - a CSS file containing only the snippet for the regular font, generated from a woff2 file - has gotten me close to final solution. Now when I open up a note, I can see that the font has been appropriately applied. But as soon as I click on the note to edit it, the entire note changes to bold italic font. Do you have any sense of why this might be happening?

11

I don’t know why its like that but my best guess is a plugin conflict. If it is not, I’m sorry it doesn’t help you.

12

Strangely enough, it just started working out of the blue. So to anyone else who tries this out, if it seems buggy at first, just give it a little while.

Thanks for coming up with this solution!

13

Example of my fonts.css:

/* From: https://practicaltypography.com/charter.html */

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

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

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

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

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

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