WaniKani random font

Aw, that really sucks. I looked and it’s working for both Firefox and chromium on my end.

At first I thought it wasn’t working as well, but I updated Firefox and then everything was fine.
Keep in mind I only included three fonts, which your computer may not have. I simply cannot test it because I don’t use Windows (or the real Chrome).

I’ll update it now with more fonts and a shorter interval time, so that font changes are more frequent.

All Windows users should read the previous pages for all fonts working on their system (and how to download new ones)!

https://greasyfork.org/en/scripts/16567-wanikani-random-font

Heh, half an hour ago I look and the font doesn’t change and I think what the hell?! It always worked… then I look at the code and see that my fonts have been replaced.  :P

Following somebody’s tip I have removed ‘user-response’ from the script, but the script still changes fonts there. Any other way to disable it?

embe said... Following somebody's tip I have removed 'user-response' from the script, but the script still changes fonts there. Any other way to disable it?
 Yea, removing 'user-response' will only make the meaning show up normal. But when you need to give the reading, that's still in Japanese (selected by
[lang="ja"] ).

If you only want the font of the question to change, replace line 27 (the same one where you deleted 'user-response') with

$('#character span').css('font-family', chosen).hover(function() {
(changes are in bold)


I’d need a guide for how to install it to Tampermonkey, how to Tampermonkey, how to use script. A detailed guide for someone who has never touched a PC.

/t/Visual-Guide-on-How-To-Install-A-Userscript/12136/1

I am really liking this script but i was curious if there is a way to adjust the font size?

You can change the size of the font by installing the extension Stylebot (Google Chrome), then:
Click Stylebot icon > Open Stylebot > select part of the screen you want to change > in the bar on the right change the font size

I had to replace #user-response with #character.kanji in the script in order for it to work…
But other than that: Great!
Thank you so much! :slight_smile:


Assirra said... I am really liking this script but i was curious if there is a way to adjust the font size?
What do you want to adjust the size of?  I'm assuming it's the question kanji.  If that's the case, and you don't want to install a separate extension, you can edit the random font script in greasemonkey/tampermonkey, adding this:

$('#character').css({ 'line-height': 2, 'font-size': 200 });
on its own line after "setInterval(randomFont, interval * 1000);" but before the "});" at the very end of the script).

To explain that line, it finds the UI element that contains the vocab/kanji/radical prompt and sets its font size to 200 pixels, while making the whole element twice as tall as the text it contains.  The text stays centred right in the middle.  

Changing the number after "line-height" will adjust the height of the prompt area (the part with the coloured background) proportional to the text it contains, such that that area is roughly font-size x line-height pixels tall.  Tweak this if you want to make that whole area larger or smaller.  

Changing the number after "font-size" will, you guessed it, change the font size.  Play around with it until you find the size you're looking for.  For a rough guide, 200 is more or less double the default size for vocab questions.

You can adjust the sizes of different item types independently by adding a few different lines like that one above using "#character.kanji", "#character.vocabulary", or "#character.radical"* in place of "#character".

Sorry for the wall of text but, I hope that helps.


* Citation needed on this one, since I don't have any radicals to review to check it, but it should be correct.

Thanks for that, it worked perfectly.
Did lower the font to 30 to make it still readable but more comparable to real world text.

I found that even tough i knew the kanji when huge on my screen i had troubles distinguishing it on smaller text.


Great script, very useful!

But it seems that the hover font ‘Meiryo’ is not installed on windows 10.
Or at least for me it’s not working (Windows 10 and Chrome).
To make it work I replaced the good font ‘Meiryo’ with the Wanikani default font collection: '“Meiryo”,“Hiragino Kaku Gothic Pro”,“Yu Gothic”,“ヒラギノ角ゴ Pro W3”,“メイリオ”,“Osaka”,“MS PGothic”,“MS Pゴシック”,sans-serif’
And now the font changes when I hover over it.

I installed the script through the link Mempo posted but for some reason, I can not get it to work…
I thought that it was cause I added some fonts to the list but after reinstalling the default script it will not change fonts either. 
Nothing changes when I hover over the kanji either in reviews.
Perhaps I’m doing something wrong…

Amenophyckxs said... I installed the script through the link Mempo posted but for some reason, I can not get it to work...
I thought that it was cause I added some fonts to the list but after reinstalling the default script it will not change fonts either. 
Nothing changes when I hover over the kanji either in reviews.
Perhaps I'm doing something wrong....
 You HAVE to replace the fonts I wrote in my script with those available on your computer. I use Ubuntu Linux and only included fonts that can be installed on my OS. There are more than enough examples of fonts that work on both Windows and Mac in the earlier pages of this thread.

I have a big list of fonts installed from an earlier post in this thread (for win 10), and i added all of them to the script, but nothing changes
Using chrome

Amenophyckxs said... I have a big list of fonts installed from an earlier post in this thread (for win 10), and i added all of them to the script, but nothing changes
Using chrome
 It's possible there's nothing wrong actually. The thing is, if the script encounters a font that isn't installed, it will display the default font for a full interval period. So if you add a whole list of fonts, but don't know which ones you have, it's possible that by chance, it only selects the ones you don't have, which creates the illusion the script doesn't work.

That's one possibility. Another would that it in fact doesn't work. I'll test it later in Chrome after fixing the anki mode script you're having problems with.

PS: if you're a bit tech-savvy, you can test which fonts work on your computer. Go to your reviews, right click on the review item and click "inspect element". This opens the developer tools. In the right column you should find a property (most likely at the very top- "font-family: XXXX,YYYY,ZZZZ" with a bunch of fonts instead of X's, Y's and Z's. If all is well, only the first one should work. So you can test all the fonts you want to try out by copy-pasting their name at the front of the line until something changes. If it does, it's one you can use.

Nope, should work in Chrome, so just check my response above for further advice.

Thanks a lot for being so helpful, I will try that out, but it is a long list so it might take me a while. I will keep you updated

Update: I just tried adding some fonts to the font family in developer tools, like suggested, and that changed the font, so it seems it was working all along! (my bad)
I will go through them all one by one now and filter out the bad apples :stuck_out_tongue:
Thanks again!

update update:
Finally filtered through all fonts and removed all the fonts that did not make the kanji  change when added in font family in developer tools.
It does change when i actually do reviews now, but it doesnt cycle through the fonts. It picks one of the fonts and sticks to that one.
(that in itself is already  a great improvement)
I only touched what was between the var fonts brackets btw, did not touch any other lines

Amenophyckxs said... update update:
Finally filtered through all fonts and removed all the fonts that did not make the kanji  change when added in font family in developer tools.
It does change when i actually do reviews now, but it doesnt cycle through the fonts. It picks one of the fonts and sticks to that one.
(that in itself is already  a great improvement)
I only touched what was between the var fonts brackets btw, did not touch any other lines  
You can also change the speed at which it selects a new font. A few lines below the font-family line you'll find:

 var interval = 30; // Seconds

Just change it a lower number for more frequent changes