As of iOS 4.2, Apple support embedding TTF fonts, which is a great improvement over the previous support, but it still has limitations. If you’re on an older version of iOS, your options are even more limited, and you’ll need to see the lower section.

Limitations

Apple appears to load the entire font into memory when it’s loaded, and doesn’t share the memory between web views. Anki uses two web views so the next question can be cached in the background, and this means the memory usage is 2*font size. If your font is very large (like a kanji stroke order font for example), you’ll probably find AnkiMobile breaking or crashing on older devices, because it’s running out of memory.

For iOS4.2+

Locate a TTF font you want to use. Rename it to use just letters and numbers to reduce complications. In the example below, we’ll use a font file called century.ttf.

Share your media folder

Follow the steps on syncing media.

After you have finished, copy the TTF file into your media folder.

Use the font on some fields

Either select the font in the fields area of Edit>Card Templates, or on the question and answer template, use something like:

<span style="font-family: Century; font-size: 64px; color: #55aaff;">
{{{Front}}}
</span>

Tell Anki about the font

  1. File>Download>Shared Plugin

  2. Search for embed and download the font embedding plugin

  3. Restart Anki

  4. Tools>Embedded Fonts

  5. Paste the content below into the dialog box in Anki.

  6. File>Sync

Content to paste:

@font-face {
font-family: Century; src: url('century.ttf') format('truetype');
}

  • The first Century is the name of the font, as used by your card template

  • The secord century.tff is the actual filename.

Test

If all has gone well, you should be able to click download in the iPhone app, and it will automatically download the font after the deck has downloaded. If you don’t see a message … media left, perhaps you have not set up media in DropBox yet. Please see the syncing media page linked above.

For older versions

On older OS versions, Apple don’t provide a way for users to add TrueType fonts to their device. Since OS 3.2 a developer can distribute fonts with the application, but it is not possible for end users to add their own.

There is a partial solution: web fonts. TrueType fonts can be converted into a a scalable vector file, and embedded inside a webpage (or on a card). There are some drawbacks, however. Fonts in SVG format take up a lot of memory: a 17MB TTF font becomes a 50MB SVG file. This effectively means that most large fonts required for complex scripts like Japanese & Chinese are unusable, as they will take up too much memory and cause the app to crash.

If you don’t need support for complex scripts however, web fonts are a good solution. See the instructions below for how to use them on AnkiMobile.

Convert to SVG

First you need a font in ttf format. Visit http://www.fontsquirrel.com/fontface/generator - note this page is currently broken on some browsers, so if you don’t see an add font button, try a different browser. It will also prevent you from converting large fonts.

  1. Choose expert mode

  2. Select only svg

  3. Add the font and upload

  4. Save the resulting zip file to your desktop.

  5. Open the zip file. You should see three files. Copy the svg and css file to your desktop. You can ignore the demo.html file.

Share your media folder

Follow the steps on MediaSync.

After you have finished, copy the svg file from your desktop into your media folder. Note that this file will be deleted every time you run a media DB check, so make sure you copy the file after checking the media DB.

Tell Anki about the font

First, open the stylesheet.css file in a text editor. It should look something like this:

@font-face {
        font-family: 'PART1';
        src: url('PART2.svg#PART3') format('svg');
        font-weight: normal;
        font-style: normal;
}

PART1 should exactly match the font you are using in Anki (Settings>Fonts and Colours). PART2 and PART3 can be left alone.

Next:

  1. File>Download>Shared Plugin

  2. Search for embed and download the plugin

  3. Restart Anki

  4. Tools>Embedded Fonts

  5. Paste the contents of the stylesheet.css file into the dialog box in Anki. You can leave off the first line.

  6. File>Sync

Test

If all has gone well, you should be able to click download in the iPhone app, and it will automatically download the font after the deck has downloaded. If you don’t see a message … media left, you probably forgot to set a media URL - see the MediaSync page.