anki icon indicating copy to clipboard operation
anki copied to clipboard

Published 20 hours ago • verified publisher icon badlydrawnrob

Explore font stacks

Open badlydrawnrob opened this issue 9 years ago • 2 comments

TL;DR

Currently using Verdana and DejaVu fonts. I might find more elegant fonts later. Would like to use a variable fonts? when better browser support. Here's the current way to declare multiple fonts properly.

  • [x] Views correctly in Safari, Chrome
  • [x] Requires override on <body> for Anki apps.
Screenshot 2023-12-18 at 16 33 32

Fonts are a bit of an arse to do cross-browser, cross-device, so if you want complete control and consistency use @font-face and save your .ttf font files to Anki's collection.media folder. Loading speed on iOS/Android may be an issue, so probably two custom fonts max.

You'll find variables/typography.less, partials/headings.less and themes/cards/... css files are the places to go to make your edits.

Good monospaced fonts

Have already checked over these ...

  • Beware that @font-face should not be nested inside a selector or class.
  • Font calculations: Verdana is now our base font, but it's a bit too big by default. The global font-size: 1rem; is inherited by, for example, headers so making the font smaller globally will fuck up everything else. For now I'm targeting just the card notes.[^1]
  • [x] I think system-ui will use San Francisco on a Mac[^2]
  • [x] ui-monospace has poor support in browsers.
  • [x] ⚠️ Changing the default --font-size rem screws everything else up. Increases size of all fonts, so be careful. Also, 1rem should allow user-edited font-size options in the browser.
  • [ ] Is setting the default --font-size with rem a bad idea? (this article sets up a percentage)
  • [x] Does changing rem on an element cascade? (like changing p affects <code> even if that tag has it's own rem declared? — It's safe to change elements with rem.
  • [x] Page speed time in iOS / Android apps? — Anki's loading speed seems fine so far.
  • [ ] Use base 64 encoding for fonts?
  • [x] YES!! Does the release deck import the custom font?
  • [x] Edit the typography.less and headings.less; or themes/... files?
    • It seems to be "all of the above" here.
  • [x] Using multiple @font-face fonts? (seems to work on desktop)

Using default --system font stacks

Monospace (ui-monospace) fails on Anki (but works in Safari). Manually writing 'San Francisco Mono' or 'SF Mono' is unpredictable in Safari and Anki. System font with system-ui seems to work on both.[^3] Screenshot 2023-12-06 at 14 48 33 Screenshot 2023-12-06 at 14 48 41

Left: system-ui (SF Mono on MacOS); Right: DejaVu Sans Mono

It's a subtle difference (I actually prefer SF Mono), but a good starting point for custom themes. You can see the L has a straight foot in SF Mono, but curve in DejaVu.

I feel the Print First CSS system-ui font stack is pretty good, but allowing custom fonts is a nice-to-have (and could help with code readability). However, after playing around with system-ui I'm now confused about the best route![^2]

Verdana looks a bit shit at default --font-size

before after

🤔 Anki custom font quirks

See the steps in the Anki documentation to add a custom font. The docs say to name your font myfont but on desktop I've named it the real font name and seems to work. Add the font to the collection.media folder.

Naming the font properly

On Anki desktop, using the proper font-family: 'Font Family Name'; seems to work. However, here only the second image will work — use the font name only ('DejaVu Sans') and use font-weight and font-style to specify the type of font (bold, italic, whatever).

Screenshot 2023-12-07 at 16 20 37 Screenshot 2023-12-07 at 16 20 52

⏳Card loading speed

You can use a hosted <link ...> tag — Anki doesn't expose the <header>, so use src: url(...) to load custom fonts from your collection.media folder.

There seems to be a potential issue with page load speed when using a custom font on Anki. I also can't find any useful information on using a URL for an @font-face with Anki.

[^1]: This is where things get tricky as both font-size and line-height is dependent on the font type, so if it's a bigger font by default, that's potentially going to fuck up all our hard work with the baseline. Also, it's a bit uncertain where to put those font-size changes and there's some who say that you should use global utility classes to do so (like Tailwind). [^2]: I'm like 70% sure. It might just fallback to sans-serif. See below. [^3]: Annoying quirks with Anki and Safari: 'San Francisco Pro', or 'SF Pro' aren't available on the Font Book app but they are available as a system default. In Safari, system-ui seems to pick 'SF Pro' as it's default, as does ui-monospace with 'SF Pro Mono' — ui-monospace has poor support with Anki and browsers! Manually typing in the font-family (using the name of the San Francisco font) doesn't seem to work on Safari anymore, nor with Anki (I think my previous font stack was falling back to sans-serif. monospace weirdness: selects 'Courier' on Safari and 'Menlo' on Anki 🤦‍♂️🤬 ... I "think".

badlydrawnrob avatar Nov 19 '15 19:11 badlydrawnrob

Probably keep this simple with one for Mac/iOS and one for Android. Possibly allow a custom font if using base 64 encoding

badlydrawnrob avatar Mar 08 '18 21:03 badlydrawnrob