(Solved) Anki macOS using the wrong font in type-in box

Anki Help
1

Hi! The macOS version seems to be using the “Arial” font in the type-in box instead of the more suitable “system-ui” or Helvetica. The big problem here is that the default “Arial” font in macOS Ventura is not suitable for language learning. In this font, this phonetic symbol [ɪ] (the KIT vowel for those learning English) does not contain serifs, thus making it hard to tell apart from a lowercase l and an uppercase I.

The iOS version of Anki does use the “system-ui” font in the type-in field, and also in the names of the decks. This makes it very easy to tell [ɪ] apart from other symbols, because in the system font in all Apple devices it does contain serifs, just as the International Phonetic Association designed it. The macOS version seems to be using Helvetica for the names of the decks, so the decision to use Arial for the type-in box is quite odd.

2

Judging by this line, Anki uses the editing font specified for the answer field:

Anki adds that font as an inline style to the input:

f"""
<center>
<input type=text id=typeans onkeypress="_typeAnsPress();"
   style="font-family: '{self.typeFont}'; font-size: {self.typeSize}px;">
</center>
"""

But you can easily override the font-family of the input with CSS:

#typeans {
  font-family: system-ui, Helvetica !important;
}

Please note that !important truly is important in that case, because inline styles have a higher specificity than rules applied via stylesheet.

It seems like Anki Desktop does the right thing (according to the multi-language idea) and AnkiMobile actually uses the “wrong” font and should be patched.

Regarding the use of system fonts in general (e.g. for deck names, as you mentioned): I’m all for that. I also think it would be better to provide a system font stack in reviewer.scss rather than including Arial in the base template. @dae I’m sure I got a very limited view on this and there might be valid reasons to keep things as-is?

2 Likes
3

AnkiMobile should pick up the field font defined in the template for the answer comparison. It doesn’t do this for the typing area, which is outside the webview and a fixed size.

4

Tip: Going to the “Fields” window and typing “system-ui” as the editing font for the answer field works like charm across platforms. On mac, it will use the SF Pro font, and on Windows 11 it will use the Segoe UI font. Since I’ve also used “system-ui” as the font for this field in card styling, this now means the font you use in the typing area and the one that will be shown for comparison are the same on Windows/macOS/iOS (But as dae said, on iOS the typing area always uses the system font).

1 Like
5

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