Custom Japanese font not rendering on AnkiMobile iOS15.1

AnkiMobile (iPhone/iPad)
1

Hello, I’m having an issue with AnkiMobile using a custom Japanese font. I’m using the font Genei Chikugo Mincho v2 (源暎ちくご明朝) on my cards. The font is free and it can be downloaded here: 【フリーフォント】源暎フォント ダウンロード - 御琥祢屋. When I use anki on my PC (Windows 10, Anki version 2.1.49), the font renders as expected, which can be seen in this image:

jpfont-correct-desktop
jpfont-correct-desktop1113×581 53.8 KB

(correct font appearance)

However, when I use my iPhone (iOS 15.1, iPhone 6s, AnkiMobile version 2.0.83), the custom Japanese font does not render at all. This can be seen in the image below. This is especially clear in the さ and い characters. I use vertical text on mobile, so that’s why the text orientation is different.

incorrect-jpfont-mobile
incorrect-jpfont-mobile750×1334 43.4 KB

(incorrect font appearance)

Here is the css for my card type:

Front Template

<div class="tategaki">{{Expression}}</div>

Back Template

<div class="tategaki">{{furigana:Reading}}</div>

<hr id=answer>

<div class="meaning">{{Meaning}}</div>

{{Audio}}

Styling

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

.card {
  font-family:"genchiku";
  font-size:3em;
  background-color:#2f2f31!important;
  color:#ffffff!important;
  text-align:left;
}

.tategaki {
  font-size:1.1em;
}

.meaning {
  font-size:0.8em;
}

.mobile .card {
  font-size: 1.8em;
}

.mobile .tategaki {
  font-size:1.1em;
  align:center;
  margin:0 auto;
  text-align:left;
  text-orientation:upright;
  writing-mode:vertical-rl;
  -ms-writing-mode:vertical-rl;
  -webkit-writing-mode:vertical-rl;
}

This is what my collection.media folder looks like. I cleaned out my collection.media folder a few weeks ago and manually deleted some unneeded fonts from past decks. All the files below what’s shown here are just more mp3 files.

collection-media-image
collection-media-image1107×677 163 KB

What have I done to attempt to fix the problem?

  1. Reread the Custom Fonts section of the anki manual.
    I’ve tried every combination of quotation marks and renaming the ttf file and no matter what, the font will work on PC but not on mobile.

  2. Uninstall and Reinstall anki.
    I’ve uninstalled and reinstalled anki on my desktop, as well as uninstalling and reinstalling ankimobile on my phone.

  3. Restart Computer/Phone
    I’ve restarted both my computer and my phone multiple times and have found no difference.

  4. Setting iPhone Language to Japanese
    I set the language of my phone to Japanese, synced again, and no difference was found.

  5. Installing the custom font on my iPhone using a third-party font installer app
    I’ve tried installing the font using the app FontInstall.app, and it was supposedly succesfully installed to my phone, but it had no effect on anki.

  6. Trying other fonts
    I have used another font, Crimson Pro, in conjunction with Genei Chikugo with a font stack in font-face, and Crimson Pro was rendered correctly. Neither Crimson Pro or Genei Chikugo are installed on either of my systems, PC or mobile.
    Crimson Pro is a free font and can be found here: https://fonts.google. com/specimen/Crimson+Pro

  7. Searching for Solutions Online
    I’ve looked on the anki forums and on reddit for issues with fonts not showing on mobile, but almost all of them were related to the person not using @font-face correctly or not using a TTF file. I’ve read over the “Custom Fonts” section of the main manual and I’m stuck becuase I’ve followed it exactly multiple times.

Custom Japanese fonts have previously worked just fine in AnkiMobile a few months ago, so I figure it has something to do with iOS15 or my phone just being old.

I am aware that Japanese fonts are rather large, so that could be why the english Crimson Pro font worked properly while my Genei Chikugo japanese font did not. I read in the AnkiMobile manual that mobile has trouble with more than three fonts, so I made sure to delete all fonts except the aforementioned two, as well as all unused note types.

Thanks for reading through this, any assistance would be appreciated.

2

I can reproduce the problem here, and don’t see any problems with your CSS. I’m afraid chances are there’s something about the font that iOS is struggling with. I don’t recall any changes on AnkiMobile’s end recently that would affect this, and the fact that other fonts are working seems to point to this as well. The computer version of Anki uses a different web renderer based on Chrome, whereas AnkiMobile uses the one based on Apple’s Safari. I suspect if you were to try using that custom font on a website, you’d see the same results in Safari. If you’re really keen on using it, maybe there are programs out there than can modify and rebuild font files, which may end up turning it into something Safari is able to load.

3

I understand, I just wanted to make sure that I wasn’t going crazy and completely missing something. It’s not a big deal by any means, but I was just confused as to what the cause of the weird font rendering was. The rendering being Apple’s fault made sense, and was the only reason I suspected because I couldn’t find anything wrong on my end. It seems pretty conclusive that it’s an issue with iOS, especially given how you were able to recreate it.

Thanks for the quick response, I’m glad to find the cause for the weird issues I’ve been having.

1 Like