Embedding Fonts

Currently, 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 1.2+.

Finally, it is possible to extract just the elements you need from a large font, though the process is somewhat involved. Please see http://groups.google.com/group/ankisrs/browse_thread/thread/f0e43776955d1921 for more information.

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.

AnkiWiki: EmbeddingFonts (last edited 2010-07-30 13:17:50 by DamienElmes)