Third-party font support for RTL language

Anki Card Design
1

I don’t believe that the below represents any kind of Anki bug, but rather a large gap in my knowledge of fonts (and perhaps a small gap in Anki’s documentation):

After nearly six years of using Anki every day, I finally got sick of looking at Arial, which is objectively a disgusting font.

I then downloaded SF-Pro (because San Francisco is the system font on Apple devices) and followed the instructions in the manual to install it, updated some of my notes’ styling, and my cards immediately began to look better.

One major problem: around 20,000 of my cards contain text in a certain right-to-left language that is only spoken by around 10,000,000 people globally. And the font that I installed doesn’t seem to support that language, so all of the text in that language across my Anki cards now looks absolutely horrific - readable, but extremely ugly.

So I download the ttf file for San Francisco font in the desired script. However, I can’t figure out how to get Anki to use it.

Currently I’ve got this at the bottom of the styling tab:

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

But that obviously isn’t enough, because there are two fonts that I want to add. How does it work when someone wants to add two different custom fonts to the same note type?

Suppose I add something like this:

@font-face {
  font-family: myotherfont;
  src: url("_SF-Other-language.ttf");
}

… My notes aren’t built in a way that the words from different languages are separated with or

that can be styled with CSS. They just flow together. Will Anki be able to see which language is which and intelligently apply the font styling that I want?

Is the solution to download a different type of font file that supports all of the languages in one? If so, does anyone know where I can find that?

2

Anki uses the standard CSS spec, which allows specifying font fallbacks. You can read about it here. In particular:

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user’s system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried.

3 Likes
3

Thank you! That helped me get to a solution.

For anyone else trying to make different LTR and RTL fonts play nicely together on a single card, here’s some sample styling (this assumes the tff files are in the correct location):

.card {
 font-family: "Name of font for LTR characters", "Name of font for RTL characters", sans-serif;
 font-size: 30px;
 text-align: left;
 color: black;
 background-color: white;
}

.cloze {
 font-weight: bold;
 color: blue;
}
.nightMode .cloze {
 color: lightblue;
}

.code { 
  font-family:courier; 
}

@font-face {
  font-family: "Name of font for LTR characters";
  src: url("_LTR-font.ttf");
}

@font-face {
  font-family: "Name of font for RTL characters";
  src: url("_RTL-font.ttf");
}
1 Like
4

If you are still having issues, see my deck on Arabic vocabulary: it uses a special font for Arabic and has text in both LTR and RTL directions.

Check both the CSS area, as well as the HTML for Back and Front on how to implement the CSS.

Lastly, don’t forget to include the font, renaming it with an initial underscore. See Installing Fonts from the Anki documentation.

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.