fix(i18n): use Lato and NotoSansJP fonts for Japanese

[sidemt]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

Closes #XXXXX

While I was looking at the PR about Japanese font in the main repo, I realized my mistakes in this repo.

Changes:

• load both Lato and NotoSansJP when the language is set to Japanese, so that the alphabet and numbers are displayed in Lato while using NotoSansJP for other Japanese characters.
• use NotoSansJP everywhere, not only in the post body.

Screenshots (Japanese):

I don't know how to run the English build locally with the current code, so I checked the Chinese build to make sure this change doesn't affect other languages.

Screenshots (Chinese):

[scissorsneedfoodtoo]

Tested locally and everything LGTM! 👍

Really like the way that you use CSS variables here to swap between fonts. That's a really neat technique.

[scissorsneedfoodtoo]

To test English locally, the easiest way to do that is to use the command we use for e2e tests, npm run start:ci:english. That should use some mock Hashnode posts we have in a local JSON file.

We also have Dockerized Chinese and Spanish Ghost instances, so if you have Docker and Docker Compose set up, you could run npm run start:containers, then npm run start:ci:<chinese or espanol> to do quick Chinese / Spanish builds locally.

But since Chinese and Spanish don't have too many published posts, I usually set the language in the .env file and do a quick build using live data with npm start.

[sidemt]

To test English locally, the easiest way to do that is to use the command we use for e2e tests, npm run start:ci:english. That should use some mock Hashnode posts we have in a local JSON file.

Thanks, @scissorsneedfoodtoo! This was the information I was looking for. I thought it doesn't work because the npm run start:containers command doesn't seem to start the English container anymore.

[scissorsneedfoodtoo]

No problem, @sidemt! Thank you again for this fix.

About the English container, yes, that's right. We recently removed that container and updated the tests to reflect our current setup where the English publication is sourced from Hashnode and the other publications are sourced from Ghost.

You should still be able to use npm run start:ci:english, but now the data will come from JSON files with some mock HN posts and pages.