フォント

STUDIOでは、Google Fonts と TypeSquare(モリサワ)が無料で利用できます。プロジェクトへのフォント追加・設定方法をご紹介します。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

STUDIOでフォントを追加・設定する方法

STUDIOでは、どのプランでも無料でGoogle FontsTypeSquare(モリサワ)のフォントが利用できます。

プロジェクト内で利用するフォントは「フォントリスト」で管理します。フォントリストに追加した各フォントにはサブフォントが追加でき、この複数フォントのまとまりを「フォントファミリー」と呼びます。

この記事では、フォントの追加、置換とサブフォントの活用方法をご紹介します。

💡 現時点で、フォントのアップロードやインポートには対応していません。STUDIO上で提供するフォントをご利用ください。

フォントリスト

フォントリストは、エディタ左側のスタイルパネルに格納されています。

フォントリスト内はドラッグで並べ替えが可能で、一番上にあるフォントがプロジェクト内での初期(デフォルト)フォントとなります。新しくテキスト・リッチテキストボックスをページに配置するとこのデフォルトフォントが自動で適用されます。

スタイルパネル内のフォントリスト画面

フォントを追加し適用する

利用したいフォントをフォントリストへ追加し、テキストへ適用します。

  1. フォントリスト内「Add Font」をクリックします。

フォントリスト内「Add Font」ボタンの画面

2. Google FontsとTypeSquareの一覧が表示できます。フォントをこの中から選択するとフォントリストに追加されます。

フォント種類を選択する画面

3. テキストボックスを選択した状態でフォント名にカーソルを合わせると、スクリーン上でプレビューできます。フォント名をクリックすると、選択中のテキストボックスにフォントが適用されます。

フォントのプレビューを確認する操作

フォントを置き換える

置き換え機能を使うと、適用中のフォントを別のフォントへ一括置換できます。

  1. フォントリストから、置き換え元のフォントを選択します。

フォント置き換えボタンの画面

2. 「置き換える」ボタンをクリックし、置き換えたいフォントを選択するとすぐにフォントが置換されます。

フォントをフォントリストから削除する

フォントリストから追加したフォントを削除します。

フォントリストを開き、削除するフォントを選択します。「フォントを削除」をクリックするとリストから削除できます。

フォントリスト内フォント削除ボタン画面

もし、そのフォントを使用しているページがある場合は、「置き換えて削除」と表示され、置き換え先のフォントを選択するモーダルが表示されます。

選択後、フォントを削除をクリックします。

フォント置き換え設定モーダル画面

ラベルを変更する

フォントリストなどで表示されるラベルはフォント毎に変更できます。フォントリストからフォントをクリックし編集します。「見出し1」「本文」のような名称は管理がしやすくおすすめです。

フォントラベル変更画面

フォントの利用場所を探す

フォントリストの右側には、表示中のページ内でのフォント使用数とサイト全体での使用数が確認できます。表示中のページ内でフォント適用箇所はエディタ上でハイライト表示されます。

フォントの使用状況確認画面

フォントリストでフォント選択し「使用状況」を開くと、そのフォントが使用されているページ一覧が確認できます。各ページをクリックするとそのページに移動し適用箇所が確認できます。

フォントリスト内フォント使用状況確認画面

サブフォントの追加とフォントファミリー

フォントには「サブフォント」が追加できます。この複数フォントのまとまりを「フォントファミリー」と呼びます。

フォントリスト内サブフォント追加画面

サブフォントはドラッグで並び替えができ、フォントファミリーの中で上にあるものから順番に適用されます。 例えばフォントファミリー内に次の順番でフォントを追加し並べた場合、

  1. かなフォント

  2. 英語フォント

  3. 日本語フォント

ひらがな・句読点などは(1)、半角英数字は(2)、それ以外の漢字・全角記号は(3)...のフォントが反映されます。つまりフォントファミリーを使えば、和欧混植の「合成フォント」を実現できます。

フォントファミリーの使用例が表示された画面

フリーフォント

こちらの回答で解決しましたか?