Web制作を学び始めたばかりの方から、こんな質問をもらいました。

Figmaのデザインを見ると
「ヒラギノ角ゴシック ProN」と書いてある。
でも、VS Codeにはそのフォントが入っていない。

CSSで表示させるには、フォントをインストールする必要がありますか？

正直、この質問を見た瞬間、
最初は何を言っているのか、すぐには分かりませんでした。

ただ、少し読んでみて、すぐに気づきました。

VS Codeのフォント設定が、
作成したWebページに反映されると思っている。

つまり、
VS Codeのフォントと
Webページに表示されるフォントを
「別のもの」として捉えられていない、ということです。

まずお伝えしたのは、
今回はフォントのインストールは不要、ということ。

ここで混ざりやすいのが、

VS Codeのフォント設定と
CSSで指定するフォント。

この2つは、役割がまったく違います。

VS Codeのフォント設定は、
あくまで自分の作業画面（エディタ）を見やすくするためのもの。

Webページに表示されるフォントとは関係ありません。

一方で、CSSのfont-familyは、
ブラウザに対して
「この順番で使えるフォントを探して表示してください」
と指定しているだけです。

今回Figmaで指定されていた
ヒラギノ角ゴシック ProN は、Macに標準で入っているフォントです。

そのため、

Macで見ればヒラギノが表示される
Windowsで見れば、ヒラギノが入っていないのでメイリオなどが表示される

という挙動になります。

これは、再現できていないわけではなく、
Webとしては想定どおりの動きです。

おそらく今回の疑問は、

VS Codeにフォントがない
＝
Webページでも表示できない

と考えてしまったことが原因だと思います。

ただ、これはWeb制作初心者なら
かなり自然な勘違いです。

このあたりで迷い始めるのは、

なんとなく作っていた状態から
仕組みを理解しようとし始めたサインでもあります。

なので、決して悪いことではありません。

フォントの話は、
Google Fonts や Webフォントを使い始めると、
また別の理解が必要になってきます。

Web制作の学習では、
こうした小さな勘違いポイントを一つずつ潰していくことが、
あとからじわじわ効いてきます。

同じところで「？」となっている人の、
安心材料になれば嬉しいです。