Can someone help me with Anki styling please?

This is my Styling Template:

@font-face {
  font-family: "Mgenplus";
  font-size: 40px;
  text-align: center;
  color: black;
  background-color: white;
  src: url("_rounded-mgenplus-2c-medium.ttf");
}

I wanted to use this font.

However, the text is not centered at all:

Can someone tell me how I can make this work? I’d like to be able to center the text and make the font size bigger (changing font-size has no effect…).

2 Likes

New Solution


Old Solution


Yes, Anki card styling is a bit complicated. It uses HTML and CSS, but the rendering doesn’t work exactly the same as in a browser. So:

Regarding the centering

In this situation, you want to put your styling in a predefined class called .card. In your styling tab, it should look something like this:

.card {
   font-family: "Mgenplus", sans-serif;
   font-size: 20px; //40px is pretty big
   text-align: center;
   color: black;
}
Regarding the custom font

If you’re just using Anki on your computer, I would recommend that you just download and install the font you’d like to use and specify like above.

But if you want access to the font from other devices, the font you’ve put in the URL part isn’t a link to a website, it’s just the .ttf file name, you need to provide a URL link to the font-file you want. I’m unsure whether Anki actually has support for the @font-face property, but I do know you can use Google Fonts to get a custom typeface.

It looks like Kosugi Maru is similar to the font you were interested in. To use a Google Font on your Anki card you need to click Select this style in the styles section and copy the links that it provides. Then paste them into your Front template like so:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">

{{Front}}

<hr>

And then like before you can just type the font as your font-family name in the Styling section, like below:

.card {
   font-family: 'Kosugi Maru', sans-serif;
   font-size: 20px;
   text-align: center;
   color: black;
}

Hope this helps.

6 Likes

This has frustrated me to no end

1 Like

Thanks! You provided all the info I needed to make it like I wanted:

2 Likes

Okay, I’ve figured out how to use the fonts the way you had originally intended, and looking at the post again, I think my original solution was a bit hacky. This solution is still assuming that you need to access Anki away from your computer. So:

  1. Download the font you want, maybe Noto Sans JP, as the previous font I recommended doesn’t have good Latin text rendering, and click Download family in the top-right and unzip the file.

  2. You probably only want the regular font-weight, so grab that, and add an underscore to the front of the file name. So NotoSansJP.otf, becomes _NotoSansJP.otf. This is important, otherwise Anki will delete the file.

  3. Then navigate to Anki’s collection.media folder—how to find the folder here—and add your font file.

Now you can use the font-face method from before and it should work as intended. You can remove the two links we added from before from your Front template.

Your card styling will look something like this
@font-face {
   font-family: 'Noto Sans JP';
   src: url("_NotoSansJP.otf");
}

.card {
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 20px;
   text-align: center;
}

This is a better method because you’re storing the font on your Anki account rather than requesting to download the font-family from Google every time you review a card in your deck.

Yeah, it’s very frustrating, I wish they would expose some of the card rendering so it would be easier to get your head around, but maybe it’s not possible.

1 Like

Actually the new solution doesn’t work for me.

This is how the font should look like:
Screenshot 2021-04-22 164249

However this is how it loads in anki. (It’s not on anki but it looks the same)

Screenshot 2021-04-22 164254

But you’re right that with the old solution fonts take a split-second to load, but it’s less annoying than the other problem lol. I’m still trying to find a solution that fixes both problems :slight_smile:

Ah! That sucks, I’m not sure what to say other than to try some basic troubleshooting. The easiest solution—and I feel kinda dumb for not suggesting this earlier—is to just install the font onto your computer. Just double click the NotoSansJP.otf file, Windows should help you install it, and Anki can display installed fonts. You just need to know what it’s called on your system, but you could just have a few different variations and hope one of them works. Example below:

The other solutions above should both work for AnkiWeb when you’re not at your computer and the mobile apps, but if it’s just your one computer then this is best.

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