Because I feel like the former is meant to have Japanese fonts even for Latin glyphs for consistency's sake, but I understand that some people do prefer the other way.
And indeed, MacOS system font by default is like that. Windows is the opposite, though (everything is in Meiryo UI or whatever it's now called.) (Not sure if it's changed in Win11 either.)
Not the OP, but I'm sure it's webpages that don't have the lang attribute at all, which is why macOS used the Japanese font stack instead of the English one.
On Windows at least (can't test MacOS at the moment), the default `lang` of web page when there is no attribute is actually the display language of my browser (in both my and OP's case, English), not my OS's (Japanese).
Furthermore, Firefox has a heuristic lang detection algorithm (!) based on content. I wrote an article about it 10 years ago, but not sure if it has been changed.
> the default `lang` of web page when there is no attribute is actually the display language of my browser (in both my and OP's case, English)
Uhh, let me check...
> MacOS Monterey, default system language is Japanese but obviously I browse a lot of English websites.
I don't think that OP ever stated that their browser is in English, just saying that they also browse English sites (and they're probably not using Firefox - its text rendering is super consistent across different systems). Safari (obviously) and Chrome (less obviously) in macOS defers to the OS for text rendering - hence the problem.
Please specify your environment. I use Japanese OS and I haven't found a single OS/browser combo would do that.
Use Windows as an example, sans-serif by default = Arial for Chrome and Firefox for English content.
And as a bonus, you can even adjust the default sans-serif font in browser setting to your like; while with these hard-coded CSS, you can't.