Japanese Font Trouble

Anki Help
1

Hi all. I’m using Anki for windows to learn Japanese. I’ve spent all morning trying to get the font right on the cards to no avail.

Screenshot 2024-04-30 094833
Screenshot 2024-04-30 094833641×541 15.6 KB

Here, the English font is right (M PLUS 1), but the Japanese font is not. Also, you can see that the kanji characters appear to be a different weight than the hiragana characters, which is really what’s driving me nuts. I thought it was a copy/paste problem so I enabled the “paste without shift key strips formatting” option in editing preferences — no dice.

I’ve changed the editing font in every field to the right font, that didn’t fix it either. I’ve also tried several solutions from this forum (sorry, don’t know how to link). I’d just like these cards all in one font, with some things bolded. It’s fine if it’s a different font, but I can’t get Yu Mincho, for example, to work right either.

This is my front/back/styling code:

<div class="japanese" style="font-size:60px;">{{vocab-kanji}}</div>
<br/><div style="font-size: 16px; ">{{vocab-part}}</div>
<br/>< br/>
<div id="example-sentence" class="japanese" style="font-size:40px;">{{expression}}</div>

<div class="japanese" style="font-size: 50px; ">{{furigana:vocab-furigana}}</div>
<div style="font-size: 16px; ">{{vocab-part}}</div>
<br/>
<div style="font-size: 30px; ">{{vocab-english}}</div>
<br/>
<div class="japanese" style="font-size: 30px; ">{{furigana:reading}}</div>
<br/>
<div style="font-size: 20px; ">{{sentence-english}}</div>
<!---->

.card {
     font-family: "M PLUS 1" !; 
     font-size: 20px;
     text-align: center;
     color: black;
     background-color: white;
 }

(If I take away that “!” after M PLUS 1 it changes the English font to some default font. Don’t know why!)

Thanks for any help you can give and apologies for the long post!

2

Did you try other fonts? I use KleeOne Regular.

3

Yes — I tried Yu Mincho and Meiryo.

4

That only impacts the font you see in the Add/Edit note windows.

Check the HTML view of the fields in the Editor by clicking the < > above the field – Adding/Editing - Anki Manual. You might still have some formatting in there that you don’t know about.

Where is your “japanese” class defined? Where are you applying the font that isn’t the primary/English font?

2 Likes
5

You would also need something like this in your styling section:

.japanese { font-family: "some font"; }
2 Likes
6

Okay, I think I solved it (somehow.) Thank you for your replies. In case someone else stumbles into this problem…

I copied the initial formatting for the cards from a different deck, so they must have defined “japanese” somewhere. I removed that from my formatting to no effect. I replaced the code in my styling section with that from a different deck that WAS working with my desired font.

This is what I had:

.card {
    font-family: "M PLUS 1" !;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

And this is what I replaced it with:

.card {
 font-family: "M PLUS 1";
 font-size: 25px;
 text-align: center;
 color: Black;
 background-color: White;
}

Shrug. It worked. So strange.

Thank you — I didn’t realize that!

7

By removing the “japanese” class from those tags, you allowed them to fall back on the general “card” class that you have defined.

By removing the ! on the font-family in the “card” class … :thinking: Well, it’s possible that’s an old version of !important, but I’m not totally sure. If it is, then removing it allowed text to use another font that was set at a closer level to the text – pasted into the field of your note, perhaps? [You can see that in the HTML view I mentioned earlier.]

But those changes won’t cause the font to remain consistent on other platforms. To do that, you’ll still need to install the font in your collection. Styling & HTML - Anki Manual

1 Like
8

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