I successfully added custom fonts to Anki desktop by following the instructions in the manual. However, the fonts do not load when reviewing cards in AnkiDroid (version 2.18.4, checked on checked two different devices). This is not a sync issue. I know the fonts have synced onto my Android devices because they actually load as expected when I preview the cards in the browser. This is specifically a problem in the reviewer. My guess is there’s a setting in AnkiDroid that is overriding my CSS.
Because the font is working as expected on both Anki desktop and the card preview mode of AnkiDroid, I doubt my CSS itself is the problem, but for the sake of thoroughness, here’s the relevant markup:
I am aware that the ability to customize the “default” AnkiDroid font was removed in version 2.17. In other words, the UI font can no longer be customized. However, custom fonts can still be used in cards if they are added to collection.media as I have done.
TLDR: on Android, custom fonts only load in card preview mode. Please help.
This is the case with a lot of other things. If you turn on the new reviewer from developer options it solves quite a few issues like that (Settings > About then click ok on Anki logo a few times). I use that at times.
Templates = CSS/HTML the note type/card type is using. In the overflow menu you can click Copy as markdown and then can paste it here. Basically, what you posted earlier but I hoped to see the full template.
This is a major showstopper for me. No font support in 2.18.4, even though this is the single package available on Google Play…what’s up with this? The default Hebrew font is modern, completely useless for biblical language studies. Same is true for the default Greek font (modern) for that matter!
I downloaded 2.15.3 off Amazon Play on my Kindle Fire HD (only option available, once again), and simply loaded the font directory into the android folder, and no changes to my decks were required whatsoever–just a rename of the ttf files to match the styling tags.
So…I downloaded 2.15.3 as a package and installed it on my Android phone. The phone doesn’t like it due to security vulnerabilities, but I forced the install anyway. Now everything works just fine, like the Kindle Fire platform.
Now, in 2.18.4 there are no options for font settings, and the font tags are ignored. It looks like Anki is heading for the bit bucket. I hope not.
Some concrete points: Put your ttf file in the collection.media folder with an underscore before their name. Then put the name of the font in “font-family” in .card { } in the styling section.
I know how the styling is done; that is not the point. The point is that the earlier workaround, creating a “fonts” folder and naming the fonts the same as the script tags, was a brilliant solution that worked well in 2.15.3, but no longer. The single-word name, underscored to prevent “unused media deletion,” makes the font naming no longer consistent. The original font names are stored within the ttf files themselves, and cannot be easily changed. This means that detailed scripting is now required, placing the full responsibility on the user to check platform type and alias the fonts correctly to get the expected result. This seems to change the user’s prerequisites from “eager learner” to “scripting expert.” Few of us have time for this.
I’m sorry, I’m not meaning to “whine,” because Anki has made such great progress, and I can do great things with the desktop version; I just wish it were easier to use AnkiDroid as well. I want it all, I guess!
The AnkiDroid-only custom font workaround you’re talking about was removed in 2.17, but AnkiDroid supports the Anki custom font method in use on all other Anki platforms. The AnkiDroid-only method would be impossible for most users to do now because the app is required to use restricted access storage (i.e. you can’t make a fonts folder or put anything in it).
The new method is pretty straightforward. You will likely need to update some of your card templates/styling, but there’s no detailed scripting, and you don’t need to change the internal name in the TTF file. Once you have this set up, it will sync with your collection and work in Anki on any platform.
I think if you take a look, you’ll see this is much more customizable approach, but if you’re having issues with editing your templates, feel free to post them here and ask for help.
Thank you for a beautifully crafted response, Danika_Dakika. Yes, I noticed that the installation is now in the restricted access area. Some devices, like my phone, do allow for changes in this area from a laptop/desktop USB connection, but this would be challenging for many.
Right now, 2.15.3 (which is still the app version on Amazon for Kindles), works on both devices. I will use it until there are problems with desktop compatibility; I’ll have to change eventually. I have observed that none of the foreign language shared decks that I have inspected (I am creating my own notes), provide AnkiDroid font aliasing; so, I must assume none of these individuals use AnkiDroid. I will most likely not use it either. Too much trouble. If it were LaTeX, I might stand a chance, but I haven’t coded html since the 90s!
I don’t doubt what the store is giving you, but I also have a Kindle Fire HD, and I’m running 2.18.4 just fine. Maybe a different generation (mine is 10th gen)?
If you’re using a current/recent version of desktop Anki, the first compatibility problem I’d expect you’ll see is a v2/v3 scheduler mis-match, or maybe you’ve seen that already? In your AnkiDroid installs, have you enabled the optional “experimental” scheduler in your Settings > Advanced?
Well, I went to the trouble of installing the fonts in the collections folder as directed in the manual, and added all scripting (similarly to the OP above) in Anki. The fonts updated dynamically, and ended up working just fine. I then added AnkiDroid 2.18.5, synced, and…still no font support. I did verify that the fonts are in the collections folder on the phone, and that all card scripting is identical to Anki. So, the saga continues!
By the way, I did notice that Anki has an “add mobile class” option in the card edit window. Is this something we need to get AnkiDroid to work correctly? I’m not sure what it does…
Update: Here is what I have so far for a single card type:
My media folder contains the following fonts: _Cardo.ttf, _CardoBold.ttf, _CardoItalic.ttf, _SBLgreek.ttf, and _SBLhebrew.ttf.
That set of options allows you to customize the Preview side of the template editor. So if you have platform-specific CSS in your Styling with the .mobile class, checking that box will apply it in your Preview, so you can make sure everything is working.
All I can do is assure you that this functionality works just fine.
Again, if you want help with your templates, you will have to post them here. Sometimes another set of eyes is enough to find the issue. Post all of them – front, back, and styling – as text in a code/preformatted text block, please.
I’m certainly no expert on CSS, so hopefully someone with more experience will have some comments. To tide you over, I noticed a couple things –
Hopefully your actual Styling tab has "straight" quotes instead of the “smart” quotes you posted here. [Sometimes Discourse adds them here if you pasted outside of a codebock.] Smart quotes usually don’t work in Anki/CSS/HTML.
You’re using a font family in your card class, so that will apply to the whole card, but where are you applying your GreekSTY and HebrewSTY classes? Are those universal terms that I’m not familiar with? Otherwise, I don’t see how they would reach your card templates. The manual explains how to apply those classes to any part of your templates.
If none of that helps, check out some of the shared-deck examples that author posted to help another user with this – including a Greek deck. Custom Font AnkiDroid - #11 by matta
Following on from @Danika_Dakika : you do not appear to be using HTML in your templates.
You must wrap the text that you want to appear in a specific font within an HTML element that requires your front. I do this by adding a <div> element and then giving it a class of “greek”. The “greek” class is then defined to use the SBL Greek font on the Styling section of the template (use the Styling radio button).
The top few lines of my Styling section are as follows.
This is then used on my card by having the following in the Front Template section.
<div class=greek>
{{Front}}
</div>
It will all work on the mobile apps and the workstation/computer applications, because it is using the defined and supported Anki method of using your own fonts.
I agree with you: most of the Hebrew and Greek alphabet support in common fonts is atrocious. I use the SBL fonts, which look great. Their spacing for diacritics is quite good. To help your learners, you may want to increase the font size for Hebrew and Greek, so that it is easy for the learner to distinguish characters and diacritics.
Thanks for the response. I just found out my problem, though. A crazy oversight on my part! And you are correct, but somehow my cut-and-paste missed something–I did have the {{Hebrew}} wrapped correctly on my end (I’ll update the reply to match)!
Always remember: Only one font defined for each @font-face {…} call!
For some reason, Anki didn’t seem to mind, but AnkiDroid does. I just cut each font definition; i.e.,
And everything works well, now! Thanks so much for your assistance. You folk are so very helpful! You have made me take the next step in becoming more a part of this community. This is an outstanding learning tool.
