OSX Catalina upgrade messes up Wanikani fonts

I just allowed my mac to upgrade to OSX Catalina, and the Japanese fonts in Wanikani look awful.

I haven’t got time to try and fix this yet, but I thought people might appreciate a warning.

If anyone knows how to fix it, please let me know. When I get a chance to figure it out, I’ll post an update.


They look the same to me


That’s weird, I’ve updated as well and haven’t noticed any difference. Are you using any scripts that might affect fonts?

In Chrome and Brave, the fonts look messed up - very fat strokes, with not enough space between parts of the characters. In Safari, things look fine.

1 Like

I wondered if Wanikani changed the fonts, but I guess it was the OS update. I hate it. I feel like it makes things even harder to remember :confused:

I’m relieved it’s not just happening to me! Yes, it looks hideous now.

No. No scripts at all.

Do you usually use Safari as your browser? Things seem to look OK if I use that, although I don’t know if it’s changed, because I never used to use it.

Yes, I usually use Safari. To be clear, are you talking about Japanese characters during lessons/reviews? Or all Japanese characters across the entire site (vocab pages, etc)?

I don’t have any reviews due at the moment so can’t check that right now, but the fonts on the vocab pages look identical in Safari and Chrome for me…

How does it look in Firefox?

Here’s what I’m talking about.

The messed up one is using Google Chrome, the other is using Safari.

It affects all characters on the site. The worst affected are the “displayed” characters (reviews, lessons and search results) but even the example sentences are affected - the font for those looks OK, but the kerning is off, with the characters looking squeezed together.

I don’t have Firefox installed, so I don’t know how it looks in that.


It looks like some kind of interface between Chrome and the macOS font system has changed on Catalina.

We ran some tests here, and saw the same behavior and rendering. There’s a long list of fonts we suggest in our CSS, with Hiragino Kaku Gothic Pro getting first position. Further down the list are fonts that are on Windows, or fonts we recommend to our Linux users.

Chrome is no longer matching against the font family name “Hiragino Kaku Gothic Pro”, instead falling way down to a chunkier alternative “Osaka”. But! It does match against the PostScript font name "HiraKakuPro-W6”.

There are problems with specifying the font with the PostScript name, though. First, it’ll mess up the browsers that are working well. Also, that’s a font name, not a font family name, so it includes the weight. If we put the PostScript name in the list, it’s going to make a bunch of other stuff look weird.

I logged a bug with Chrome (submitting it into whatever black box the “report a problem” window represents). We’ll keep an eye on this, but I’d say use Safari for a while, and watch out for a Chrome update. Maybe they’ll fix it in the next release. Safari has the benefit of being way better for battery life if you’re on a laptop, too.


Except you can’t run user scripts with Safari currently :disappointed:

UPDATE: TamperMonkey for Safari 13.x has been submitted to Apple and is in review :crossed_fingers:


Thanks for sharing your screenshots! I feel you! I felt something different but I didn’t realise about this font problem after upgrading to Catalina. Based on OldBonsai’s suggestion, I temporarily stopped using Chrome, and just use Firefox, for now.

Screenshot on Firefox

Screenshot on Chrome

1 Like

FWIW, it seems there is an open issue on chromium.org dealing with this. Sounds like some kind of issue with sans-serif font matching. Hiragino Sans seems to work for me in Chrome, anyway.


Even using Safari, some things are still messed up.

It’s mostly fine, but I got this today.


1 Like


Hello :slight_smile: Any news about the submission ?

TamperMonkey just came out for Safari 13.0.2… but it cost 2.29€…


$1.99 on US App Store: ‎Tampermonkey on the Mac App Store

Worth. It.