Skip to main content
Participant
February 13, 2025
Answered

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

  • February 13, 2025
  • 2 replies
  • 1928 views

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」に表示されないため、現状ほかのフォントで同様の現象が起きたら、メモ帳アプリを開いて調べるしかありません。
他の手段をご存知の方はいらっしゃいませんか?

Correct answer monokano

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

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

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

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

2 replies

monokano
Community Expert
Community Expert
February 13, 2025

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

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

 

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

 

 

追記:

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

ichimaruAuthor
Participant
February 13, 2025
ご回答ありがとうございます。「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
Community Expert
monokanoCommunity ExpertCorrect answer
Community Expert
February 14, 2025

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

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

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

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

Omachi
Legend
February 13, 2025

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

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

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

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

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

 

ichimaruAuthor
Participant
February 13, 2025

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

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
Legend
February 13, 2025

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のサイトが間違っていると思われます。