2026/3/12
［ 初回公開日：
2025/1/30
］
【Studio初心者ガイド】利用できるフォントについて｜Editor 5.0対応
※本記事は Studioの「Editor 5.0」に対応しています。
Studioでは、多彩なフォントが自由に使えるのをご存じですか？
Google FontsやTypeSquare（モリサワ）をはじめとする豊富なフォントが利用可能で、デザインの幅を広げる絶好の環境が整っています。
この記事では、Studioで使えるフォントの種類や設定方法、サブフォントの便利な活用法まで詳しくご紹介します。
デザインの可能性を広げるヒントが満載です！
Studioで利用できるフォントについて
Studioでは、多彩なフォントを簡単に使いこなすことができます。
Google FontsやTypeSquare（モリサワ）をはじめ、魅力的なフォントが揃っており、プロジェクトのイメージや用途に合ったフォントを自由に選べます。
これらのフォントは全プランで利用可能で、エディタ内で簡単に設定・管理が行えるのも大きな特徴です。
ここでは、Studioで利用可能なフォントサービスについて詳しくご紹介します。※フォント名クリックで公式カタログへ
FONTPLUS
FONTPLUSは多彩な日本語フォントを提供するサービスで、特に日本語デザインに適したフォントを多数揃えています。
デザインの質感や雰囲気を左右する重要な要素である書体選びにおいて、FONTPLUSは高い自由度を実現します。
Studioでは最大50フォントファミリーまで追加可能です。
Google Fonts
Google Fontsは世界中で広く利用されている無料フォントサービスで、デザインの多様性を引き出す英字フォントが豊富に揃っています。
英語や欧文が多く含まれるデザインにおいては、Google Fontsが力を発揮します。
ウェブ用フォントとしての信頼性も高く、軽量で読み込み速度に優れているのも特徴です。
Studioで追加上限はございません。
TypeSquare（モリサワ）
TypeSquareは、日本語デザインに特化した高品質フォントを提供するサービスです。
モリサワの美しい書体が利用可能で、特に洗練された印象を与えたいデザインに最適です。
伝統的な雰囲気からモダンなスタイルまで、幅広い選択肢が揃っています。
日本語デザインをさらに引き立てたい場合に活用しましょう。Studioで追加上限はございません。
注意事項
Studioでは、フォントのアップロードやインポート機能には対応していません。利用可能なフォントは、Studio内で提供されているものに限られますのでご了承ください。
また、FONTPLUSでは1プロジェクトにつき最大50フォントファミリーまで追加可能です。必要に応じて適切なフォントを選択し、プロジェクト内で効率的にご活用ください。
利用可能フォントの確認方法
ここでは、エディタ内での確認方法と提供企業ごとのフォントリストについて詳しく説明します。
エディタ内での確認
エディタ上でテキストを配置し、右パネルの「フォント」（赤四角）をクリックします。
そして「フォントを追加」をクリックすれば、使用できるフォント一覧を確認できます。
フォントファミリーとは？
フォントファミリーは（赤四角）、プロジェクト内で使用するフォントを管理するための機能です。
追加したフォントは一覧で表示され、プロジェクト全体で使用するフォントをまとめて確認できます。
フォントファミリー内のフォントは並び順を変更でき、先頭に設定したフォントはデフォルトフォントとして扱われます。
このデフォルトフォントは、新しく配置するテキスト要素に適用されます。
フォントの追加方法
Studioでは、プロジェクトに最適なフォントを簡単に追加できます。
豊富なフォントサービスから選んで、デザインに合わせた雰囲気を作り出しましょう。以下に、フォントを追加する具体的な手順を詳しくご紹介します。
フォントファミリーへの追加手順
テキストを選択します。
右パネルの「フォント」をクリックして「フォントを追加」をクリックし、「フォントを追加」をクリックします。
利用可能なフォント一覧（赤四角）が表示されます。ここで追加したいフォントを選びましょう。
選んだフォントをクリックすると、自動的にフォントファミリーに追加されます。
フォントリストの絞り込み条件
フォントを選ぶ際には、以下のように絞り込み機能を活用すると便利です。
フォント名で検索（赤四角）
特定のフォントが決まっている場合は、名前を入力してすばやく探せます。
スタイルで絞り込み（赤四角）
太字や細字など、用途に合ったスタイルを複数選択して絞り込めます。
まず右パネルの「フォント」をクリックして「フォントを追加」をクリックし、「フォントを追加」をクリックします。
そしてハンバーガーメニュー（赤四角）をクリックします。
すると、スタイル（赤四角）が出現します。
言語で絞り込み（赤四角）
日本語や英語など、使用する言語に応じたフォントを検索できます（一度に1つの言語のみ選択可能）。
まず右パネルの「フォント」をクリックして「フォントを追加」をクリックし、「フォントを追加」をクリックします。
そしてハンバーガーメニュー（赤四角）をクリックします。
すると、言語（赤四角）が出現します。
フォントの適用方法
テキストをクリックして、右パネルの「フォント」（赤四角）をクリックして出現するフォントファミリーから、適用したいフォントを選べば、瞬時に適用されます。
適用されたフォントがプロジェクト全体の雰囲気に合っているか確認し、必要に応じて変更を加えましょう。
フォントの置換方法
Studioでは、プロジェクト内で使用中のフォントやサブフォントを簡単に他のフォントに置き換えることができます。
一括置換が可能なので、デザイン変更やプロジェクト全体の統一感を保つ作業がスムーズに行えます。以下の手順でフォントを置換する方法をご紹介します。
フォントの一括置換手順
1.テキストをクリックして右パネルの「フォント」をクリックし、フォントファミリーを開きます。
2.変更したいフォント名をホバーすると「詳細ボタン」（赤四角）が出現するので、クリックします。
4.新しいフォントを選び、3点リーダー（赤四角）をクリックして、「フォントを置き換えて削除」（黄色四角）をクリックして指定のフォントを選択すれば、置き換え作業完了です。選択したフォントは直ちに適用されます。
フォントを置換した後は、変更内容を公開中のサイトに反映させるためにサイトの更新が必要です。
更新を忘れると、訪問者に変更が反映されないため注意してください。
フォントのラベル管理
プロジェクト内で使用するフォントにラベルを付けることで、管理がより便利になります。
ラベルはフォントの用途や役割を明確にするための名前付け機能で、カテゴリ分けを簡単に行えます。
例えば、「見出し1」「本文」「キャプション」など用途に応じた名前を付けておくと、どのフォントをどの目的で使用するのかが一目でわかります。
これにより、編集作業が効率化されるだけでなく、チームでの共有もスムーズになります。
ラベルの編集方法
テキストを選択し、フォントファミリーからラベルを編集したいフォントの詳細（赤四角）を開きます。
「名前」の箇所でフォントのラベルを任意の名称に編集します。
フォントの使用状況確認方法
Studioでは、プロジェクト内で使用しているフォントの状況を簡単に確認できます。
使用ページや使用数を把握することで、フォントの整理や管理がより効率的になります。
ページごとの使用状況の確認手順
フォント詳細画面を開くと、使用状況が表示され、ページごとの使用状況（赤四角）を確認できます。
また、該当ページ（赤四角内）をクリックすると、そのページに直接移動できるため、編集がスムーズに行えます。
フォントの削除方法
プロジェクトで使用していないフォントを簡単に削除することができます。
削除する際には、使用中のフォントがあれば置き換えを行う機能も用意されており、デザインへの影響を最小限に抑えることができます。
フォントの削除手順
1.テキストをクリックして、右パネルの「フォント」をクリックし、フォントファミリーから削除したいフォント詳細画面（赤四角）を開きます。
2.右上にある3点メニュー（赤四角）を選択し、「フォントを削除」をクリックすることで削除が可能です。
※そのフォントがプロジェクト内で使用されている場合は、「フォントを置き換えて削除」が表示されます。
サブフォントの設定
「サブフォント」とは、メインフォントに追加で設定する補助的なフォントのことです。
これを利用することで、プロジェクト内で異なる文字種（日本語、英語、記号など）ごとに最適なフォントを自動的に適用できます。
たとえば、日本語には見やすい和文フォントを、英数字にはスタイリッシュな欧文フォントを使うといった設定が可能です。
サブフォントを使うことで、和文と欧文が混在するデザインでも統一感とバランスを保ちながら、美しい仕上がりを実現することができます。
サブフォントの追加手順
サブフォントは、フォントの詳細画面から追加できます。
フォントリストで対象のフォントを選択し、「サブフォントを追加」（赤四角）をクリックします。
そして該当のフォントを選択することで設定が完了します。
サブフォントは、フォントファミリー内で並び順を変更できます。
サブフォントの適用ルール
サブフォントは、リスト内でドラッグ操作により順番を変更することができます。フォントの適用はリスト上位のものから順に行われ、以下のように適用されます。
1番目のフォント：ひらがなやカタカナ、句読点などに適用されます。
2番目のフォント：半角英数字や特殊記号に適用されます。
3番目のフォント：漢字や全角記号に適用されます。
このルールを活用することで、和欧混植のデザインを効率よく実現できます。
まとめ
Studioでは、多彩なフォントが利用でき、初心者でも簡単にプロジェクトに取り入れることができます。
この記事では、フォントの追加や適用、管理方法をご紹介しました、お気に入りのフォントを見つけて、あなたのデザインに個性や魅力をプラスしてください。
フォント選びを楽しむことで、クリエイティブな表現の幅がさらに広がるはずです。デザイン初心者の方も、この記事を参考に一歩ずつ進めてみてくださいね。
この記事を書いた人
