2021 10 - Anki - Simplified Chinese Character display with SimSun font

Anki 2020 September
anki font simplified chinese mandarin serif sans serif handwriting

To anyone who searches this, here is the style code I use for Anki reviews.  While learning simplified Chinese characters, noticed that some characters change between serif and sans serif font.  When reviewing with strictly sans serif, this would cause inaccuracies in writing characters.  During tests where handwriting was required, I would lose points from these inaccuracies.  Example would be 每, which transforms to a + symbol in the box instead of two dots.

Was trying to use SimSunB font.  Works fine on Windows PC, but would not on Android.  Use SimSun (without the B).  It worked for me and another who had the same problem.  Since a user cannot simply "install" fonts on Android OS like you would on a Windows PC, the font needs to be included in your Anki Collection's media folder.  This is easier to do on desktop then sync to your Android phone.  Anki servers will transfer the font file for you.

....\AppData\Roaming\Anki2\ [name of your collection] \collection.media\
Location of where to place the .ttf font file.  Be sure to add an underscore ( _ ) to the beginning.

I used this pre-made Anki collection for my study.  Was following the "Remembering the Hanzi: Simplified Edition" by James W. Heisig and  Timothy W. Richardson.  Highly recommend looking into if you haven't heard of it.

https://massimmersionapproach.com/table-of-contents/stage-1/practice/recognition-rtk/

The collection includes SimSun.ttf.  Use the code below to have Anki Android "load" the font file.
To date, I still have no confirmation why an Android user cannot simply "install" a font file.  Probably something to do with licenses and Google wanting you to use their Google Fonts database for use.


Huge shout-out to Alpakajunge and DavidA on the Anki Discord for the help!  Also shout-out to McKillian and Subarmale for previous help as well!
https://discord.com/invite/jjQrw97
https://apps.ankiweb.net/

This may help too:
https://github.com/ankidroid/Anki-Android/wiki/Advanced-formatting

-------------------------  -------------------------  ----- -------------------------  -------------------------
-------------------------  -------------------------  Front -------------------------  -------------------------
-------------------------  -------------------------  ----- -------------------------  -------------------------
<div class="keyword">{{Keyword}}</div>
<div class="keyworddefinition"><i>{{KeywordDefinition}}</i></div>
<hr>



-------------------------  -------------------------  ---- -------------------------  -------------------------
-------------------------  -------------------------  Back -------------------------  -------------------------
-------------------------  -------------------------  ---- -------------------------  -------------------------
<div class="keyword">{{Keyword}}</div>
<div class="keyworddefinition"><i>{{KeywordDefinition}}</i></div>
<hr id=answer>

<span class="hanzi">{{Hanzi}}</span>


<br><br><br>
<div class="componentsearch">{{ComponentsSearch}}</div>
<br>
<div class="story">{{Story}}</div>




-------------------------  -------------------------  ----- -------------------------  -------------------------
-------------------------  -------------------------  Style -------------------------  -------------------------
-------------------------  -------------------------  ----- -------------------------  -------------------------
.night_mode { }

.card {
 #font-family: arial;
 font-size: 15px;
 text-align: center;
 color: black;
 background-color: white;
}

.card1 { background-color: #ffffff; }
@font-face { font-family: simsun; src: url('_simsun.ttf'); }
.hanzi { font-size: 100px; font-family: simsun; src: url('_simsun.ttf');}
.traditional { font-size: 100px; font-family: simsun; src: url('_simsun.ttf');}
.pinyin { font-family: courier; }
.keyword { font-family: Meiryo; font-size: 50px;}
.keyworddefinition { font-family: Meiryo; font-size: 17px;}
.story { font-size: 18px; color: #999}
.componentsearch { font-size: 12px; color:grey}