Japanese fonts in Firefox [edit: resolved]
I notice that, with the latest update of Firefox, Duolingo's font for Japanese questions has switched to a hairline version of PingFang. It's much harder to read, and doesn't harmonize with the latin text. The Japanese in the headlines is fine, it's just the text for the translations, the pairing buttons, the big pronunciation buttons, etc. that's using the ugly font. Chrome and other browsers are still using the appropriate fonts.
If I change my default fonts in settings, I can only adjust the font in the typing box (that is, the font that I use to type). Other web sites change, but Duolingo keeps using PingFang. Is this something that's built into the code for the pages, or is there something else I can try?
Although this is "resolved", the actual cause of the problem still exists.
The cause of the problem—ironically—is that all the web pages on Duolingo's website are written to only support a single language per page! This is even though every course has two languages (source language and target language). This could easily be fixed, but maybe there's a performance/efficiency reason why they haven't already written the code this way.
What I mean is, every page on the website has the language of its entire page (all of its text) set to one language, which is whatever language you are viewing the site in (your UI language).
If you are viewing the site in English, the HTML for each page has
lang="en" set as the language encompassing all the content on the page. This means your web browser is told only that all the text on the page is English. Meaning that if your browser then comes across a kanji on the page and its English font can't display it, then it has to guess on its own which language to use a font from (Simplified Chinese, Traditional Chinese, Japanese, Korean, Vietnamese,...)
What Duolingo could do instead is still set the top level element to
lang="en" but have the Japanese part(s) of the page set to
lang="ja" and the Chinese parts of the pages in the Chinese course set to
lang="zh-cn". This is the proper way web pages are supposed to be designed. If Duo had done this, then Firefox would have automatically known to use its Japanese font without you needing to do anything.
This is why I think it's ironic — a website used by hundreds of millions of people for learning languages hasn't made proper use of the most basic part of HTML relating to languages... ^^;
The CSS font setting for the text in the questions in the Japanese course is as follows:
"museo-sans-rounded" is Duolingo's primary font, but this web font doesn't support kana or kanji glyphs. So, for Japanese text, it falls back on the next font in the list, "sans-serif". This isn't the name of an actual font, but rather it is a keyword to tell the user's browser to decide for itself which sans-serif style font to use.
On Firefox 59.0.2 (Windows 10 desktop), if I go on the advanced font settings and under "fonts for Japanese" set its "Sans Serif" field to a font which supports Japanese characters (Meiryo, Yu Gothic, etc.) and don't touch any other settings, THEN it will change the Japanese question text font to this. ^^
(...unless you have any font interfering userstyles / userscripts / browser extensions running.)
- update -
Okay, apparently Firefox ignores the "sans-serif" keyword. What Firefox first checks under "fonts for Japanese" is what you've set the "Proportional" field to. If this field says "Serif" instead of "Sans Serif", then Firefox will use whatever font you chose in the Serif field instead.
Changes to the "Serif" and "Sans Serif" fields take effect immediately upon clicking the "OK" button. However, if you change the "Proportional" field, strangely you have to restart Firefox before this change will take effect.
Other than this, what I wrote should still be correct. ^^
I'm on Firefox 59.0.2 on a new MacBook Pro. I've tried changing the "proportional" field back and forth between "serif" and "sans serif," I've tried putting any number of fonts in each of the three serif, sans serif, and monospace fields, mixing and matching everything, restarting Firefox, etc. Any changes I make affect every web site except Duolingo.
Your problem sounds like the same problem I have when I use the Chinese course, although my problem happens in all versions of Firefox and Chrome (not specifically related to a Firefox update). For me it displays half of the hanzi in a Chinese font and half in a Japanese one. For me, Duo seems to default to using the Japanese font (Meiryo), and then only use a Chinese font for any characters which the Japanese font doesn't support (any characters/forms that are used only in China).
It's very possible your problem is the same as mine, only that Firefox for some reason gives Japanese higher priority over Chinese for me, whereas it could be the reverse for you on your Mac.
I've tried lots of things to alter the priority—changed system locale to Chinese, changed system location to China, put Chinese input language as the default, uninstalled Japanese IME—but none of these things worked.
The only thing that seemed to affect the priority is going on Firefox → Options → "Choose your preferred language for displaying pages", adding "Chinese/China (zh-cn)" to this list, and then making sure Chinese is higher in this list than Japanese... But then I'd have to keep changing the order depending on whether I'm doing the Japanese course or the Chinese course...
You could try the reverse: add Japanese to that list and (if you have Chinese in the list at all) make sure Japanese is higher in the list than Chinese.