Variable font-family for kanji cards

Help
#1

I have created a deck for refreshing my kanji knowledge. As experience shows it is a good idea that I review kanji in several different fonts, as often a kanji that is immediately recognizable in a non-serif font (say) may require some serious brain racking when presented in a serif or somewhat calligraphic font.

What I found so far is that I can change the font by adding, say,
font-family: 'YuMincho';
in the .main_wrap element of the css code for the layout. This allows me to have the same kanji in several different fonts on the card (e.g. one on the front, one on the back), create copies of the deck that use different fonts, or change the font manually from time to time by changing it in the layout.

This is already quite nice, but not yet ideal. Given the impressive functionality we have available for deck design in Kitsun, I wonder if we can do more… Would it be possible to make the font of the kanji on the front of the card depend on the SRS stage? (Is there a variable I can query that gives me the SRS stage? If so, can I work around the fact that there is no if/then in CSS?). If not, is it possible to make the font-family more variable in any other way (dependent on something else or a random value)?

1 Like
Randomized Fonts
#2

Hi!

Technically speaking it would be possible to add classes to the review/lesson wrappers so that you can add custom fonts based on that, if that’s what you’d like to have then I can add it to the to-do list :slight_smile:

Just a small note regarding fonts in general, the way you are doing it would require you to have the fonts installed on your own computer, which would work just fine for a personal deck, but perhaps not when sharing the deck (you’d have to mention that they need certain fonts installed on their devices).

1 Like
#3

Just to be clear: you mean classes depending on the SRS stage, right? That would be really great! :grinning_face_with_smiling_eyes:

Thanks for the note regarding the fonts. So far it didn’t even occur to me to share my deck at some point, but if I ever do, I’ll make sure to mention the font requirements.

1 Like
#4

Yep! :smiley:

I’ll let you know once it’s been added.

1 Like
#5

@konadare It’s been added. Please check the update notes for the details :grinning_face_with_smiling_eyes:

1 Like
#6

Hmm, I seem to be missing something here. Saying

.level-1 p{
    color: blue;
}

(in the styling box) does nothing for me. I did the same for levels 2-5 just to be sure that I really get a card where it definitely should be applied.

The level-x classes should get automatically applied to any p in the html part (of a card of the corresponding level) or do I have to give that p a particular class as well (I’ve tried level and level-x, but that does not seem to work either)?

#7

I have tried again… Now after logging out and in again it works as expected (not 100% sure if that did it or something else). Thanks a lot, I find this a great feature! :+1:

As a side note I have noticed during these experiments that even using different colors for the same kanji slightly throws me off getting the reading right. :sweat_smile:

2 Likes
#8

Did you manually install the fonts the same day as you set up the custom fonts? For anyone looking for this in the future, make sure to restart your device after installing them to make sure it has probably loaded in your browser.

1 Like
#9

No, I had installed the last font several weeks before. Also it was the actual color change that was not working, so it had nothing to do with fonts. If it was not logging out and in again that could have done it, it may well be that something else in my styling box was interfering: I do not have a very good grasp of the order in which styles get applied in css.

It may also have been something particular to the Safari Browser on Mac. While the coloring and some of the font-families work now in Safari, other fonts get substituted seemingly for no good reason, such as YuKyokasho by YuMincho. In Firefox however, all the fonts are displayed as expected.

2 Likes