FigmaのタイポグラフィーのCSSはGoogle Fontsとは異なるので注意

FigmaのタイポグラフィーのCSSとは

Figmaでは、テキストの書体や太さを変更すると、開発モード時にfont-familyやfont-weightに反映されます。

Figmaでよく使用されるNoto Sans JPでは、以下の7つの太さから選択できます。

WebサイトでNoto Sans JPを使用する場合、多くの場合Google FontsのNoto Sans Japanese (JP)が利用されます。

使用方法は、まずGoogle FontsのWebサイトにアクセスし、Noto Sans Japaneseを選択します。

その後、Embed codeからコードをコピーして、HTMLやCSSに貼り付けます。

Noto Sans JPを使用したサンプルでは、太さを9段階で変更できることがわかります。

一方で、メイリオは太さを2段階しか変えられないため、font-weightはnormalまたはboldの2段階のみと勘違いされることがありますが、フォントによってはCSSで3段階以上の太さの変更が可能です。

ここで、「Figmaでよく使用されるNoto Sans JPでは以下の7つの太さを選択できます」と初めに述べたことを思い出していただけると思います。

実際には、Figmaではすべての太さの設定が可能ではありません（Noto Sans JPでは7段階まで）。

また、FigmaのタイポグラフィーのCSSの値はGoogle Fontsと異なる場合があります。

Figmaで設定できる7つの太さと、それに対応するタイポグラフィーの相関を表で一覧化すると、表示される太さは以下の通りです。

GoogleフォントのNoto Sans JPを見ると、太さの名前はThin, ExtraLight, Light, Regular…となっており、太さの名前が同じではありません。

さらに、GoogleフォントでThinはfont-weight: 100; なのに、Figmaではfont-weight: 250; とタイポグラフィーのCSSに表示されるので、CSSのfont-weightの値も一致していません。

FigmaでNoto Sans JPのThinまたはDemiLightの太さを使用する場合、タイポグラフィーのCSSのfont-weightに正しい値が表示されないので注意が必要です。

※ 値が250と350のようにGoogleフォントの値とかなり違うので、よく見ている人なら気づくと思いますが。

現在のGoogle Fontsでは、どの太さでも使用可能な「Full axis」または「One value」を選択する方式になっています。

「One value」を選択すると、太さを1つしか選択できなくなり、フォントを通常と太字にCSSで切り替えることができなくなります。

Webサイトで使用する際は、特別な理由がない限り「Full axis」を選択してください。

また、古いGoogle Fontsでは「Full axis」がなく、400と700のみを選択する方式でした。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

そのため、古いGoogle Fontsで読み込んだCSSでは、使える太さが限られていることを覚えておくと良いでしょう。

Google Fontsで使用可能なフォントの中には、似たような名前のものがいくつかあります。

例えば、「M PLUS 1」と「M PLUS 2」は名前が似ていますが、別のフォントです。これら2つを間違えて指定すると、一部のテキストの見た目が変わってしまいます。

また、Google Fontsでは「M PLUS Rounded 1c」ですが、Figmaでは「Rounded Mplus 1c」と表示される場合があります。

Googleフォントのfont-familyとは異なる値なので、この正しくない名前の値をCSSで指定しているとfont-familyが適用されません。

自身のパソコンにNoto Sans JPなどのGoogle Fontsがインストールされている場合、font-familyの指定だけでフォントが表示されることがあります。

Webサイト制作をしている方はGoogleフォントが読み込まれていない場合でもすぐに気づけるように、自身のパソコンにGoogleフォントをインストールするのは、必要性がなければ避けたほうが良いでしょう。

Figma本体にはNoto Sans JPやM PLUS 1などがあらかじめ入っているため、事前にフォントをインストールしなくてもFigmaでは使用可能です。