How to define Japanese fonts in CSS in cross-browser mode?

I’m having trouble explaining Japanese fonts on some text using CSS that Safari will accept. Is a widely used Japanese font. MS Gothic. This is the font page on the Microsoft site.

I have it installed on my computer. (As ordinary Japanese readers would.)

I am trying to explain the CSS to get the installed font. My font family declaration looks like this:

font-family :  'MS Gothic', 'ＭＳ ゴシック' , 'MS ゴシック' , Msgothic, 'ヒラギノ明朝 ProN', sans-serif;

“ＭＳ シ ッ ッ ク” is the only Japanese translation of “MS Gothic”. And “N ラ ギ 明朝 明朝 ProN” is a very different font, which I added to catch CSS fallback when paused. When I use this declaration, it works in Chrome, and I get the font I expect:

In Safari, however, it picks up the wrong font – it actually calls the fifth “N ラ ギ 明朝 N ProN”:

Here is a preview of the font installed on my machine:

And here is the OS level information:

How can I write a font name so that it works reliably across browsers? I would expect the font name to be “MS Gothic”, because that’s the name of the file. The file name of the font that is actually rendered (N ラ ギ ノ N ProN) is. ラ ギ ノ 明朝 Pro.ttc

Note: Microsoft Word uses the Japanese translation of the font name to select it:

Fiddle to test:

#output {
  font-size: 3.5rem;
  font-family :  'MS Gothic', 'ＭＳ ゴシック' , 'MS ゴシック' , Msgothic, 'ヒラギノ明朝 ProN', sans-serif;
}

<div id="output">
  日本こんにちは
</div>