Framerの日本語フォント

明朝もゴシックも、ピッカーの中にあります

Framerのフォントピッカーには Google Fonts が入っています。ゴシックの Noto Sans JP と、明朝の Noto Serif JP は、そのまま選べます（当方がFramerで公開した日本語ページが、実際にこの2つを読み込んでいます）。追加の設定も、コードの記述も要りません。

手持ちの書体を使う場合は、テキストレイヤーを選んで右パネルのフォントピッカーを開き、Custom タブの Upload Fonts から読み込みます。Framerのヘルプは、速度のために .woff2 を使うことと、その書体をウェブで使えるライセンスかどうかは使う側で確認することを明記しています。

• ・和文の本文に明朝を選ぶなら、字面の小さい書体ほど、行間を広めに取ります。
• ・見出しと本文で書体を変えるより、同じ書体の太さを1段だけ変えるほうが、静かに見えます。
• ・欧文と和文を別の書体にする場合は、欧文側の字の高さを和文に合わせます。合っていないと、英字だけが浮いて見えます。

日本語フォントは重い、という前提は要りません

和文の書体は数千から数万の文字を持ちます。全部を読み込めば当然重くなりますが、Framerはフォントを用途ごとの塊に分けて配り、ページに出てくる文字に必要な塊だけを読ませる、と説明しています。読み込みが終わるまでは、大きさを合わせたシステムの書体を先に見せて、あとから差し替えます（font-display: swap）。

つまり「和文フォントは重いから避ける」という判断は、たいていの場合は不要です。速度のために書体を諦める前に、画像の枚数と大きさを先に見てください。ほとんどの場合、重いのはそちらです。

書体を直しても、まだ安く見えることがあります

ここからが本題です。フォントを正しく選んだのに、英語のときほど良く見えない。原因はたいてい書体ではなく、その並べ方のほうにあります。日本語で崩れるのは3つだけです。

どれも公開されたサイト側で直ります。3つとも無料で試せて、当てるのはボタン1回です。コードは書きません。

3つが同じ1枚で動くところは Framerの日本語対応 にまとめてあります。