Hi everyone! I’m new here and I’ve only just started using WaniKani a few days ago.
Somehow, I found my way to KameSame. I’ve been trying to use it, but I can’t get the most out of it because some characters are just not loading. Instead of properly displaying stuff, I get squares. I tried looking up in the forums, but I can’t find a similar issue. Has someone else experienced this? How do you resolve this? I’ve already tried reloading, but I’m still getting squares.
If it helps, I’m using the Brave web browser [Version 1.5.115 Chromium: 80.0.3987.149 (Official Build) (64-bit)]. Here’s a screenshot:
I think someone mentioned this problem on Opera as well. You might have no other choice but to use another browser for KS (if you want to keep using Brave).
I don’t really like the idea of needing another browser just for this one thing, but I can consider it. Do you use KameSame? On what browser do you use it?
I ended up creating my own Chrome extension to fix the issue, but I’ve emailed the developer with what I did to fix it in hopes that they’ll make the appropriate changes. Basically a few minor tweaks to the css to line it up with how WaniKani loads in fonts.
The website creator already responded and it sounds like they are on board with fixing the issue, but here’s the source for the chrome extension I made in the meantime (not sure on the policy with sharing entire zip files in here):
styles.css:
body {
font-family: "NotoSansCJK", "Noto Sans JP", system-ui, emoji, sans-serif !important;
}
input {
font-family: "NotoSansCJK", "Noto Sans JP", system-ui, emoji, sans-serif !important;
}
fontloader.js:
var link;
link = document.createElement("link");
link.href = "https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
I’m happy to report that the issue has been fixed already! That was fast. I’ll leave that code up in case anyone needs to change fonts on a Japanese learning website in future.
Try searching google for how to install proper/full/complete Japanese support on your device/browser. Often someone somewhere has already run into a similar issue. It’s pretty rare to be the first ever, these days.
Because that’s the order WaniKani sets them in the source css. Also, the input css bit was needed for the input field, which was using Arial for the font instead of a proper font. I suspect Chrome does some custom fixes that aren’t natively in the Chromium codebase, so if sites aren’t comprehensive about font families then they won’t look right in certain browsers. Japanese-only websites look fine for me, so it’s just edge cases like KameSame that sometimes don’t look right in all browsers.