Anki + Arabic Custom Fonts rendering incorrectly

Ahlaan everyone.

I am having issues with Anki displaying this custom Arabic font correctly from The King Fahed Glorious Quran Center for Hafs.

I am using Windows latest edition on the latest Anki version.

Where is Abdo, please? The Syrian programmer …

Thank you!

It would help if you could specify your operating system, your Anki version and details of your problem.

1 Like

Thank you. I edited it.

And this is an image of the problem, from the shared Arabic deck of "Quran Ayah English Translation (OpenArabic dot org)] on Anki Web.

I downloaded that deck and the styling on the cards is arial font. If you changed it, make sure you did it according to the steps here. (Actually you can also just replace arial with your preferred font, in quotes if there are any spaces, but then if you sync to mobile devices, you may not see it there)

https://docs.ankiweb.net/templates/styling.html?highlight=font#installing-fonts

2023-02-19_153314

1 Like

Can you share a download link for the font or just its name? (I don’t see it’s used in the shared deck)
If you can’t post links because you’re new to the forum, you can work around that by using the forum editor’s Preformatted text option.

1 Like

Salaams wa ahlaan Abdo.

I cannot link the Hafs font from:

https [dot forward slash forward slash] fonts [dot] qurancomplex [dot] gov [dot] sa

The issue is that this weird character is not rendered correctly: ۟ - Arabic Small High Rounded Zero: U+06DF - SYMBL (◕‿◕)

The issue happens in all major browsers I tested (Chrome, Firefox, and Edge). Curiously, text editors like notepad and BabelPad don’t have the issue.

Not sure whether this can be fixed but will post an update if I find something.

A workaround for now is to remove this diacritic as it’s probably not essential to understanding the text. Copy the character from the linked page and use Anki’s Find and Replace feature to remove it from all cards in the deck.

3 Likes

Shukran kateer!

And I hope that Anki programmers can work on submitting bug reports for Qt6 so that these fonts render correctly.

Salaams.

@abdo I also am using Windows 11, and here is what the same card looks like on my system, with no changes made to the styling, at least in preview. I don’t know if this is right or not, but it is somehow different.

I downloaded the font I think @ANB is using from here: https://fonts.qurancomplex.gov.sa/wp02/حفص/

Then added the font to the media folder and modified the styling section to be like this:

@font-face {
  font-family: "UthmanicHafs";
  src: url('_UthmanicHafs_V20.ttf');
}

.card {
 font-family: UthmanicHafs;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

End result:

1 Like

@abdo OK, got it, I can reproduce this too, now.

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