Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explore font stacks #12

Open
12 of 18 tasks
Tracked by #1
, #2
...
badlydrawnrob opened this issue Nov 19, 2015 · 2 comments
Open
12 of 18 tasks
Tracked by #1
, #2
...

Explore font stacks #12

badlydrawnrob opened this issue Nov 19, 2015 · 2 comments
Labels
enhancement help wanted so-so This is an intermediate edit

Comments

@badlydrawnrob
Copy link
Owner

badlydrawnrob commented Nov 19, 2015 •
edited

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.

  • Views correctly in Safari, Chrome
  • 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
  • I think system-ui will use San Francisco on a Mac2
  • ui-monospace has poor support in browsers.
  • ⚠️ 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)
  • 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.
  • Page speed time in iOS / Android apps? — Anki's loading speed seems fine so far.
  • Use base 64 encoding for fonts?
  • YES!! Does the release deck import the custom font?
  • Edit the typography.less and headings.less; or themes/... files?
    • It seems to be "all of the above" here.
  • 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.

Footnotes

  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. ↩ ↩2

  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 badlydrawnrob mentioned this issue Feb 13, 2016
Closed
@badlydrawnrob badlydrawnrob added this to In in 2.0.0 Mar 8, 2018
@badlydrawnrob badlydrawnrob removed this from In in 2.0.0 Apr 28, 2019
@badlydrawnrob badlydrawnrob added this to In in 2.2.0 Apr 28, 2019
@badlydrawnrob badlydrawnrob removed this from In in 2.2.0 Aug 21, 2019
@badlydrawnrob badlydrawnrob mentioned this issue Dec 6, 2023
Open
13 tasks
@badlydrawnrob
Copy link
Owner Author

DejaVu Sans Book looks a lot slicker than DejaVu Sans Bold. It's a bit too clunky and a wider font than book.

@badlydrawnrob badlydrawnrob added the so-so This is an intermediate edit label Dec 25, 2023
@badlydrawnrob badlydrawnrob mentioned this issue Jan 3, 2024
Open
20 tasks
This was referenced Jan 14, 2024
Open
Open
@badlydrawnrob
Copy link
Owner Author

Renders ok in Safari (codepen)

IMG_1918

Doesn't render properly in Anki app (no idea why)

IMG_1919

@badlydrawnrob badlydrawnrob mentioned this issue Jan 19, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement help wanted so-so This is an intermediate edit
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@badlydrawnrob