How can AnkiWeb display a TTF file font?

Anki Card Design
1

image
image1164×939 16 KB

image
image1306×985 12.8 KB

Hello all,

I’ve managed to get my custom font Zeresoa into Anki and am very pleased with it. I would love to study cards in the custom script on AnkiWeb, but have no idea how to give AnkiWeb a TTF file.
How to view custom fonts in AnkiWeb?

Images attached to show the difference.

2
3

I don’t see any mention in the manual or the linked video where one can update HTML for the web version? Unsure how I can get a TTF file into the browser version, which is why I specifically mentioned AnkiWeb. Maybe I’m missing something, but AnkiWeb doesn’t seem to have any Edit Card features.

4

You need to install the font in your collection on desktop Anki – following those instructions. Then, when you sync your collection to AnkiWeb, the font will sync too.

Right now on desktop, you’re probably only seeing the font because it’s installed on your device. But that’s not enough to make it show up on a website.

5

Yes, in the original post I specified that it was working fine on desktop. I’ve synced after installing successfully on desktop but the web browser continues to be incorrect. I wonder if syncing alone is not enough? Or maybe there is some extra step in syncing that I missed.

6

No, those instructions are correct, if you followed them.

Installed the font to your Windows computer? Or installed the font in your Anki collection?

7

It should be enough to place the font file into the collection.media, referencing it via @font-face at the top of the styling tab of your card template and syncing it to upload everything to the cloud.
If it’s not displaying correctly you can try doing hard page refresh (Ctrl+F5 or Ctrl+Shift+R) to clear the cache. To check if there is a problem with the browser reading your font file you can check the console (F12) for errors like “failed to decode downloaded font”.
As an independent test you can also make a minimal html file:

<!DOCTYPE html>
<head>
<style>
@font-face {
  font-family: "MyFont";
  src: url("_MyFont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
body {
  font-size: 40px;
  font-family: "MyFont";
}
</style>
</head>
<body>
  some text
</body>
</html>

and try opening it in your browser. It expects the font file being named “_MyFont.ttf” (with the underscore; case matters) and placed in the same folder as the html. If the font itself is fine, it should render the text using it.