Studioでフォントを追加する方法（モリサワ対応）

Studioでサイトを作るとき、フォント選びは印象を大きく左右します。「ブランドに合ったフォントに変えたい」「モリサワのような読みやすい日本語フォントを使いたい」と思っても、Studioのどこで設定するのか分かりにくく、テキストごとにバラバラになってしまった、という悩みはよく聞かれます。フォントは見た目だけでなく、読みやすさや表示速度にも関わるため、なんとなく選ぶと後から統一に苦労します。

本記事では、Studioでフォントを追加・変更する方法を、全体設定と個別設定の使い分け、モリサワなど日本語フォントの考え方、表示速度の注意点まで解説します。150名以上が参加するノーコードコミュニティ「ノーコードサロン」に集まる制作現場の知見をもとに、実案件でも意識しているフォント運用のコツを整理しました。

結論：フォントは「全体テーマ→個別」の順で設定する

先に結論をお伝えすると、Studioのフォントはサイト全体の基本フォントを先に決め、必要な箇所だけ個別に上書きするのが、もっとも崩れにくく管理しやすい進め方です。

• 全体テーマ（基本フォント）：見出し用・本文用の基本フォントをサイト全体に設定する
• 個別テキスト：ロゴやキャッチコピーなど、一部だけ別フォントにしたい箇所を個別に指定する

この順番で進めると、ページを追加してもフォントが自動的に統一され、あとから一括で変更するのも簡単になります。逆に、最初からテキストごとに手作業でフォントを当てていくと、種類が増えすぎて統一感が崩れ、修正のたびに全ページを直すことになります。ノーコードサロンの制作現場でも、フォントはまず全体設計から入るのが基本です。フォントとあわせてボタンなどのパーツも整えると印象が締まるので、Studioでボタンを作る・装飾する方法もあわせて確認しておくと効率的です。

Studioで使えるフォントの種類

Studioでは、いくつかの種類のフォントが用意されています。それぞれの特徴を押さえておくと、選びやすくなります。

標準搭載のフォント

Studioには、あらかじめ多くのフォントが用意されています。ゴシック体・明朝体・欧文フォントなど、一般的なサイト制作に必要なものは標準で揃っており、まずはこの中から選ぶのが手軽です。追加の設定なしにすぐ使える点がメリットです。

Webフォント（日本語・欧文）

Webフォントは、閲覧者の環境に依存せず、意図したフォントを表示できる仕組みです。Studioでも日本語・欧文の多彩なWebフォントを選べます。デザイン性の高いフォントを使いたいときに便利ですが、日本語Webフォントは文字数が多いぶんデータが重くなりやすい点に注意が必要です（後述）。

モリサワなどの高品質な日本語フォント

読みやすさやブランド表現にこだわりたい場合、モリサワに代表される高品質な日本語フォントが選択肢になります。プロの印刷物でも使われる完成度の高い書体で、コーポレートサイトなどで信頼感を出したいときに向いています。ただし、こうした高品質フォントの利用可否や範囲はプランによって変わる場合があるため、契約中のプランで使えるかは料金プランとあわせて確認するのが確実です。プランごとの違いはStudioの料金プランの選び方で整理しています。

フォントを追加・変更する手順

実際の設定は、全体設定と個別設定の2つに分けて考えると迷いません。

手順1：サイト全体の基本フォントを設定する

まず、サイト全体で使う基本フォントを決めます。Studioのデザイン設定（テーマ・フォントの設定箇所）から、見出し用と本文用の基本フォントを指定します。ここで設定したフォントが、個別に上書きしていないすべてのテキストに適用されます。最初にここを固めておくことで、以降に追加するページも自動的に同じフォントで揃います。

手順2：個別のテキストにフォントを適用する

ロゴやキャッチコピーなど、一部だけ別のフォントにしたい箇所は、そのテキスト要素を選択し、テキストのフォント設定から個別に変更します。全体テーマを上書きする形になるため、使いすぎると統一感が崩れます。「基本は全体テーマ、アクセントだけ個別」と役割を分けると管理しやすくなります。

手順3：ウェイト（太さ）と行間・字間を整える

同じフォントでも、ウェイト（Regular／Bold など太さ）や行間・字間の設定で読みやすさが大きく変わります。見出しは太め、本文は標準的な太さと十分な行間、という基本を守ると、読みやすいページになります。日本語は行間をやや広めに取ると読みやすくなる傾向があります。文字まわりの余白の考え方はStudioのボックス・余白の仕組みも参考になります。

手順4：スマホでの見え方を確認する

PCで整えたフォントサイズや行間は、スマホでは大きすぎたり詰まって見えたりすることがあります。フォントは各画面幅で読みやすさを確認し、必要に応じてサイズを調整します。画面幅ごとの調整の考え方はStudioのレスポンシブ設定のやり方で基本から解説しています。

つまずき・よくある失敗と対処

フォントまわりでよく起きる失敗と対処を整理します。

• フォントがバラバラで統一感がない：全体テーマを設定せず、テキストごとに個別指定しているのが原因です。基本フォントを全体設定に戻し、アクセント箇所だけ個別にする方針に切り替えます。
• ページの表示が遅い：日本語Webフォントを何種類も使っていると、読み込みが重くなります。使用フォントは2〜3種類程度に絞るのが実務の目安です。ウェイトも必要なものだけに絞ると軽くなります。
• 使いたいフォントが選べない：利用できるフォントの範囲はプランによって異なる場合があります。上位プランで使えるフォントを狙っているなら、プラン内容を確認します。
• 見出しと本文の区別が弱い：フォントの種類だけでなく、サイズとウェイトで差を付けると階層が伝わりやすくなります。
• 英数字だけ不自然に見える：日本語フォントは欧文の作りが弱いことがあります。欧文部分に別の欧文フォントを組み合わせる方法もありますが、種類が増えすぎない範囲で調整します。

フォントは「増やすほど良い」ものではありません。少ない種類を的確に使い分けるほうが、読みやすく速いサイトになります。

よくある質問（FAQ）

Q1Studioでモリサワのフォントは使えますか？

モリサワに代表される高品質な日本語フォントは、Studioで選択肢として用意されている場合があります。ただし、利用できるフォントの範囲はプランによって変わることがあるため、契約中のプランで使えるかは料金プランの内容とあわせて確認するのが確実です。読みやすさやブランド表現を重視するコーポレートサイトで特に効果的です。

Q2フォントは何種類まで使っていいですか？

明確な上限があるわけではありませんが、実務では2〜3種類に絞るのがおすすめです。日本語Webフォントはデータが重く、種類を増やすほど表示速度に影響します。見出し用・本文用を決め、必要ならアクセント用を1つ足す程度が、読みやすさと速度のバランスが取れます。

Q3サイト全体のフォントを後からまとめて変えられますか？

全体テーマ（基本フォント）で設定していれば、その設定を変更するだけで、個別に上書きしていないテキストが一括で切り替わります。逆に、テキストごとに個別指定していると1つずつ直す必要が出ます。だからこそ、最初に全体テーマで設定しておくことが重要です。

まとめ

Studioのフォントは、「全体テーマで基本フォントを決め、必要な箇所だけ個別に上書きする」という順番で設定するのが、統一感を保ちつつ管理しやすい進め方です。標準フォント・Webフォント・モリサワ系の高品質フォントから、サイトの目的に合うものを選び、利用範囲はプランとあわせて確認しましょう。日本語フォントは重くなりやすいため、種類を絞り、ウェイトと行間で読みやすさを整えるのが実務のコツです。まずは全体テーマの設定から着手して、ぶれないフォント設計を作っていきましょう。