CSSのfont-family:に指定する正確なフォントファミリー名を調べたい（Windows）

[ichimaru]

OS：Windows 11 Pro
バージョン：24H2

先日、CSSで
font-family: 'A-OTF リュウミン Pr6N';
と指定してもリュウミンが使えないことに気づきました。
調べた結果、フォントファミリー名が間違っており、正しくは 'A-OTF Ryumin Pr6N KL' であることが判明しました。言われてみればKOやKSもあるので、そこがファミリー名であることは推測できることでした……。

しかしAdobe FontsのサイトやWindowsの「設定＞フォント」には 'A-OTF リュウミン Pr6N' と表示されます。以下にあるAdobe Fontsの関連ファイルでも、フォントファミリー名は同じまたは 'A-OTF Ryumin Pr6N' と設定されているようです。
C:\Users\[UserName]\AppData\Roaming\Adobe\CoreSync\plugins\livetype\c\entitlements.xml

Windows的には指定すべきは 'A-OTF Ryumin Pr6N KL' のようで、メモ帳アプリの設定からフォントを選ぶ際にはこちらが表示されました。

Adobe Fonts経由ではなくローカルインストールしたフォントであれば、エクスプローラーで「C:\Windows\Fonts」を詳細表示し、「ファミリ」の項目を追加することで調べられるようです。（参考：https://qiita.com/Actlam/items/f246d3f2c69387c867b3 ）

他のディレクトリでは詳細表示の項目に「ファミリ」を選ぶことができません。

Adobe Fontsのフォントは「C:\Windows\Fonts」に表示されないため、現状ほかのフォントで同様の現象が起きたら、メモ帳アプリを開いて調べるしかありません。
他の手段をご存知の方はいらっしゃいませんか？

[Omachi]

Adobe Fontsサイトでの調べ方を書いておきますね。

まず目的のフォントのページに行きます（例：A-OTF UD新丸ゴ Pr6N L）。

そこで、下図の赤枠の部分（</>）をクリックします。

すると次の図のように表示されますので、赤枠の部分です。テキストをコピーできますので、そのまま使えばよいです。

コピーし終わったら［キャンセル］ボタンをクリックして閉じてしまって構いません。

[ichimaru]

ご回答ありがとうございます。このようなボタンがあったのですね。

A-OTF UD新丸ゴ Pr6N Lは教えていただいた箇所を使用することで表示できました。

しかしA-OTF リュウミン Pr6N L-KLの場合はこの場所に「A-OTF Ryumin Pr6N」と書いており、今回の状況で指定に必要だった「A-OTF Ryumin Pr6N KL」とは書いていないようです。リュウミンが特殊なのでしょうか。

冒頭「CSSで」と端折りすぎてしまったのですが、ローカルのテキストエディタ（VS Code）上でMarkdownやHTMLをプレビューする際のフォントを指定しようとしています。

どうも、'A-OTF Ryumin Pr6N' や 'a-otf-ryumin-pr6n' ではなく'A-OTF Ryumin Pr6N KL' と入力しなければならないようです。

プレビューの設定だけでなくエディタの表示フォントを指定する設定項目でも同様でした。

プルダウン形式ではなくファミリ名の指定でフォント設定を行うアプリが他に思いつかないため、VS Code固有の問題なのかは調べられておりません（ただメモ帳アプリのプルダウンメニューに「A-OTF Ryumin Pr6N KL」が表示されることから、アプリ固有ではなさそうな気がしています）。

[Omachi]

VSCodeって、font-familyとfont-styleを別で指定できないんでしたっけ？　それなら「Font Family」内にfont-familyとfont-styleを両方入れないといけないです。これはVSCodeの問題なので、調査すべきでしょう。

htmlのcssであれば、font-familyとfont-styleは別建てなので、font-familyと言われたらfont-styleは気にしなくていいんだなと思っちゃいます^^

「L-KL」と書いてありますので、一応「A-OTF Ryumin Pr6N L-KL」でも確認してみてください。ダメならAdobeのサイトが間違っていると思われます。

[ichimaru]

ありがとうございます。

プレビューのスタイル設定はCSS形式なのでfont-styleを指定できますが、エディタのフォント設定はCSSそのものではないため指定できない（設定項目にない）ようです。

どちらも「A-OTF Ryumin Pr6N L-KL」を追加して試してみましたが、リュウミンは表示されませんでした。

monokanoさんが調べてくださったところによるとフォントファイル内でのファミリ名はAdobeのサイトと同じになっているようなので、アプリまたはOS側の問題である可能性が高そうです。

[IceFloe]

横から失礼します
斜め読みなので、意図を誤解しているかも？ですし
macOS上での話なのでWindowsでの実動作はご確認くださいね

前提で

ACCデスクトップアプリのフォントパネルで

『全てのアプリで利用可能』でAdobe Fontからアクティブにしていることが前提です

＞「A-OTF Ryumin Pr6N L-KL」を追加して試してみましたが

'A-OTF Ryumin Pr6N', 'A-OTF Ryumin Pr6N L-KL', serif

CSSの記述と同じでserifが最後に必要です
JSON式の設定記述だと

"editor.fontFamily": "'A-OTF Ryumin Pr6N', 'A-OTF Ryumin Pr6N L-KL', serif"

で
みやすいとは、思えないけど（老眼だから線が細い文字苦手…笑）

 エディタの表示にも反映されますし
edghの機能拡張での表示で

<style>
article {
margin: 10px;
background-color: #FFFFFF;
font-family: 'A-OTF Ryumin Pr6N', 'A-OTF Ryumin Pr6N L-KL', serif;
font-size: 36pt;
}
</style>

CSS指定で

 反映されます
（注：MacのSafari等ローカルフォントへのアクセスがセキュリティ上制限されているブラウザもありますので必ず表示できるって事でもありません）

あくまでもmacOS上での話ですので

実動作はお試しください。

＞Windows的には指定すべきは 'A-OTF Ryumin Pr6N KL' 
たぶん

'A-OTF Ryumin Pr6N L-KL'の書き間違えだと思いますが

これは『ローカライズされたファミリー名』です

よく見る
Font Family (ja)
Font Family (en-US)　ってやつです
青矢印のところにある『プラットフォーム名』を参照して
対象のプラットフォーム、この場合はWindowsですよね
ローカライズファミリー名＝プラットフォーム指定されていますから
'A-OTF Ryumin Pr6N L-KL' 'A-OTFリュウミン Pr6N L-KL'を

Windowsで認識するのは、ある意味『正解』だと思います。

最近はLangID 1033 1041指定を認識するソフトが増えたのでアレだけど…
フォントの各種名称の指定は、フォントの作者によってホント…まちまちなので
これが正解ってのも無いのがアレだけど…

リュウミンがこうなっているのは、はるか昔のOCF・CIDフォント時代の遺産で
フォントの種別で区別するためだったんじゃ『ないかな？』と

Windowsでローカライズされたフォントファミリー名を簡単に取得できるのは
コマンドラインツールになっちゃうけどexiftoolぐらいしか知らないので
あとは、検索するかOpenAI先生とかに訊いてみてください
参考まで

--
追記
画面のキャプチャに誤りがったので画像さしかえました

[monokano]

Web サイトへのフォントの追加

Adobe FontsのフォントをWebフォントで使う時は、規定の手順に沿って「Webプロジェクト」に登録します。そうすると専用の <script> が発行され、その同一画面に font-family も掲示されます。

そもそも、フォントファイルをWebサーバにアップロードするような運用は強く禁止されているので、Webフォントでの使用には専用の手続きを経る必要があるのです。

追記：

モリサワのフォントもWebサーバにアップロードするような運用を強く禁止しています。ですから、そもそもAdobe Fontsやモリサワのようなフォントから font-family に使用できる正確な名称を得ようとするのは、違反行為の一歩手前といえるでしょう。

[ichimaru]

ご回答ありがとうございます。「CSSで」というと普通Webの話ですよね。すみません。

ローカルのテキストエディタ（VS Code）上でMarkdownやHTMLをプレビューする際のフォントを指定しようとしていました。

どうも、'A-OTF Ryumin Pr6N' や 'a-otf-ryumin-pr6n' ではなく'A-OTF Ryumin Pr6N KL' と入力しなければならないようです。

プレビューの設定だけでなくエディタの表示フォントを指定する設定項目でも同様でした。

プルダウン形式ではなくファミリ名の指定でフォント設定を行うアプリが他に思いつかないため、VS Code固有の問題なのかは調べられておりません（ただメモ帳アプリのプルダウンメニューに「A-OTF Ryumin Pr6N KL」が表示されることから、アプリ固有ではなさそうな気がしています）。

そもそもfont-familyの正確な名称はデリケートな情報なのですね。自分が使うだけだからと軽く考えてしまっておりました。ありがとうございます。

[monokano · Accepted solution]

フォント名はフォントファイル内のNameテーブルに記述されています。

調べたところ、ファミリー名は「A-OTF Ryumin Pr6N」と記述されています。

Nameテーブルに「A-OTF Ryumin Pr6N KL」と記述されている箇所は存在しませんでした。

フォント側の問題ではないですね。

[ichimaru]

ありがとうございます。そうなるとアプリかOSの問題のようですね。

詳しく調べてくださりありがとうございました。