Anki app does not render font correctly

You can see the issue here with pictures. The custom font (with the font added to collection) does work (for headers) but the body doesn’t (it’s a web-safe font, “Verdana”)

Verdana is a Microsoft font. Is it even available on iPhone?

I created a new profile, edited the default styling to use verdana, and it seems to work for me.

I’ve located the problem:

:root {
  --font-family: var(--system-ui);
  font-family: var(--font-family);
/* Overriding it later */
root {
  --font-family: 'Verdana', var(--system-ui);

I’ve changed re-allocated it to <body> which does work

:root body {
  font-family: var(--font-family);

So TL;DR there’s something about Anki that seems to ignore :root selector. I don’t think it’s anything to do with the --font-variables being overriden.

It seems :root is widely supported by browsers?

1 Like

If you style :root, the styling will be overridden by the style set on .card/body.

1 Like

Ah. Yes, I agree in the instance I’ve photographed that would happen. But should it happen in the theme I created?

I’ve tested out specificity in this CodePen. My custom theme only uses :root for the main body font (along with some theme-specific selectors) but essentially just :root for the main font. Obviously I don’t use any of Anki’s default .card styling that comes with the basic card. You can see the full theme here.

  • Both of these work in Safari and Chrome browsers.
  • So I can only assume Anki adds some default css behind the scenes?

Specificity is a pain!

Thanks :+1:

Body has a default font set, which the default .card {} styling overrides.

Ok @dae thanks for the tip. I’ll make it more specific.

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