.ttf file not syncing to AnkiDroid

AnkiDroid (Android) Help
1

Trying to get KaiTi on AnkiDroid, but it doesn’t seem to be syncing.

Cards display properly on desktop and AnkiWeb, but not on AnkiDroid; when browsing my collection.media folder on mobile, I am unable to find the .ttf file (and for whatever reason I can’t copy it in manually via file manager, but I’m sure that’s some sort of Android permissions issue that’s separate). As far as I can tell, other media (all .mp3 files) appear to be working fine.

How the card should look (desktop client screenshot)

image
image226×158 5.75 KB

How it looks on AnkiDroid (not working)

image
image637×506 20.7 KB

I have already enabled “Allow all files in media imports” under AnkiDroid Settings > Advanced.

How should I proceed? I am open to solutions that don’t rely on Anki’s media sync.

edit: I’m also not set on this particular font; if there’s another way to install a script/handwriting font or find and use one that’s already on the phone, that would work. My main requirement is to be able to display both printed- and script-styled versions at the same time.

(Settings > About > ‘Copy debug info’) below:

AnkiDroid Version = 2.24.0 (ebcf8e0e34921628b9b8a496c66ffd4adbb3705f)
Backend Version = 0.1.64-anki25.09.2 (25.09.2 3890e12c9e48c028c3f12aa58cb64bd9f8895e30)
Android Version = 16 (SDK 36)
ProductFlavor = play
Device Info = Xiaomi | POCO | klee | klee_eea | 2511FPC34G | mt6899
WebView Info = [com.google.android.webview | 782709103]: Mozilla/5.0 (Linux; Android 16; 2511FPC34G Build/BP2A.250605.031.A3; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/149.0.7827.91 Mobile Safari/537.36
ACRA UUID = 92014884-4312-42d0-b483-1173caf60c44
FSRS = 5.1.0 (Enabled: true)
Crash Reports Enabled = true
2

Have you named the file with an initial underscore, and refer to it as such in the CSS?

3

Yes, the template reads as follows:

<div
	style='font-size: 48px;
	font-family: KaiTi;
	src:url("_KaiTi.ttf");'>
{{kanji:Simplified}}
</div>

In File Explorer (desktop):

image

4

Has that syntax worked for you before for defining a font-face? Have you tried following these instructions instead – Styling & HTML - Anki Manual ?

It’s possible that it’s working for you on desktop and AnkiWeb because you have that font installed on that device directly.

5

I have not had this working before; this is the first time I’m trying to do this. I did get caught up in the problem I found, and didn’t check that I had followed the instructions properly.

The relevant section of the template now reads:

<div class=kaiti style='font-size: 48px'>
	{{kanji:Simplified}}
</div>

and in the styling section:

@font-face {
  font-family: myfont;
  src: url("_KaiTi.ttf");
}

.kaiti {
  font-family: KaiTi;
}

This continues to work on desktop and AnkiWeb, but not mobile.

Additionally, I have attempted to export my collection with media from desktop and import it to mobile to see if I can get the .ttf that way, but it returns an error 500: Failed to read … stream did not contain valid UTF-8.

Strangely, in the process of troubleshooting this time, I was able to see _KaiTi.ttf in my mobile file manager, but the file does not appear when viewing it with Windows’ File Explorer while connected via USB. I’m not sure what’s going on there.

6

You named your font-family “myfont” – but then for your kaiti class, you’re calling it something else.

7

Working now, thanks for your patience.