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