STUDIOでフォントを追加・設定する方法
STUDIOでは、どのプランでも無料でGoogle Fonts と TypeSquare(モリサワ)のフォントが利用できます。
プロジェクト内で利用するフォントは「フォントリスト」で管理します。フォントリストに追加した各フォントにはサブフォントが追加でき、この複数フォントのまとまりを「フォントファミリー」と呼びます。
この記事では、フォントの追加、置換とサブフォントの活用方法をご紹介します。
💡 現時点で、フォントのアップロードやインポートには対応していません。STUDIO上で提供するフォントをご利用ください。
フォントリスト
フォントリストは、エディタ左側のスタイルパネルに格納されています。
フォントリスト内はドラッグで並べ替えが可能で、一番上にあるフォントがプロジェクト内での初期(デフォルト)フォントとなります。新しくテキスト・リッチテキストボックスをページに配置するとこのデフォルトフォントが自動で適用されます。
フォントを追加し適用する
利用したいフォントをフォントリストへ追加し、テキストへ適用します。
フォントリスト内「Add Font」をクリックします。
2. Google FontsとTypeSquareの一覧が表示できます。フォントをこの中から選択するとフォントリストに追加されます。
3. テキストボックスを選択した状態でフォント名にカーソルを合わせると、スクリーン上でプレビューできます。フォント名をクリックすると、選択中のテキストボックスにフォントが適用されます。
フォントを置き換える
置き換え機能を使うと、適用中のフォントを別のフォントへ一括置換できます。
フォントリストから、置き換え元のフォントを選択します。
2. 「置き換える」ボタンをクリックし、置き換えたいフォントを選択するとすぐにフォントが置換されます。
フォントをフォントリストから削除する
フォントリストから追加したフォントを削除します。
フォントリストを開き、削除するフォントを選択します。「フォントを削除」をクリックするとリストから削除できます。
もし、そのフォントを使用しているページがある場合は、「置き換えて削除」と表示され、置き換え先のフォントを選択するモーダルが表示されます。
選択後、フォントを削除をクリックします。
ラベルを変更する
フォントリストなどで表示されるラベルはフォント毎に変更できます。フォントリストからフォントをクリックし編集します。「見出し1」「本文」のような名称は管理がしやすくおすすめです。
フォントの利用場所を探す
フォントリストの右側には、表示中のページ内でのフォント使用数とサイト全体での使用数が確認できます。表示中のページ内でフォント適用箇所はエディタ上でハイライト表示されます。
フォントリストでフォント選択し「使用状況」を開くと、そのフォントが使用されているページ一覧が確認できます。各ページをクリックするとそのページに移動し適用箇所が確認できます。
サブフォントの追加とフォントファミリー
フォントには「サブフォント」が追加できます。この複数フォントのまとまりを「フォントファミリー」と呼びます。
サブフォントはドラッグで並び替えができ、フォントファミリーの中で上にあるものから順番に適用されます。 例えばフォントファミリー内に次の順番でフォントを追加し並べた場合、
かなフォント
英語フォント
日本語フォント
ひらがな・句読点などは(1)、半角英数字は(2)、それ以外の漢字・全角記号は(3)...のフォントが反映されます。つまりフォントファミリーを使えば、和欧混植の「合成フォント」を実現できます。
フリーフォント