SPIRAL ver.2で作成したページは、基本的にフォントの指定がされていません。
この記事では、フォントの指定が無いときにどのようなことが起こるのかを説明し、フォントの指定場所とおすすめのフォント指定を紹介いたします。
Webフォントを利用したい場合は、ページにWebフォント（Google Fonts）を使用する方法をご覧ください。
この記事では、フォントの指定が無いときにどのようなことが起こるのかを説明し、フォントの指定場所とおすすめのフォント指定を紹介いたします。
Webフォントを利用したい場合は、ページにWebフォント（Google Fonts）を使用する方法をご覧ください。
作成したページにはフォントの指定がない
サイト機能で作成したページには、フォントの指定がありません。
フォントの指定がない場合に表示される、標準フォントは端末、OS、バージョン、ブラウザなどによって大きく変わってしまいます。
表示が崩れたり動作がおかしくなることはありませんが、表示環境によっては書体が大きく変わる可能性があります。
例えば、Windows ChromeとMac Safariでは、下記のような違いが生じます。
デフォルトフォントを指定をしておくことで、上記のような書体の違いを統一したり、サイトに合わせたフォントを表示させたりすることができます。
フォントの指定がない場合に表示される、標準フォントは端末、OS、バージョン、ブラウザなどによって大きく変わってしまいます。
表示が崩れたり動作がおかしくなることはありませんが、表示環境によっては書体が大きく変わる可能性があります。
例えば、Windows ChromeとMac Safariでは、下記のような違いが生じます。
※表示できるフォントは、端末、OS、バージョン、ブラウザなどによって異なるため、指定したフォントが表示されない場合もございます。
フォントの指定方法と指定場所について
フォントの指定はCSSで行います。
サイト機能でCSSを設置できる場所は、共通ソース、ページ、ブロック（ソース設定のみ）の3箇所です。
サイト機能でCSSを設置できる場所は、共通ソース、ページ、ブロック（ソース設定のみ）の3箇所です。
共通ソース
共通ソースにフォントを指定した場合、サイト内の全ページに適用されます。
デフォルトフォントをサイト全体に一括指定できる、おすすめの指定場所です。
デフォルトフォントをサイト全体に一括指定できる、おすすめの指定場所です。
ページ
ページにフォントを指定した場合、そのページにのみ適用されます。
共通ソースにフォントを指定している場合でも、ページに別のフォントを指定した場合はそのフォントが優先されます。
共通ソースにフォントを指定している場合でも、ページに別のフォントを指定した場合はそのフォントが優先されます。
ブロック（ソース設定のみ）
ブロックにフォントを指定した場合、そのブロックが読み込まれているページ全てに適用されます。
この記事で紹介する、一括でフォントを指定する方法では、ページで一緒に読み込まれている他のブロックにもフォントが適用されてしまい、適用範囲が複雑になるため非推奨となります。
この記事で紹介する、一括でフォントを指定する方法では、ページで一緒に読み込まれている他のブロックにもフォントが適用されてしまい、適用範囲が複雑になるため非推奨となります。
おすすめのフォント指定
SPIRERS ナレッジ向上チームにて、おすすめのフォント指定を3パターン作成いたしました。
共通ソースまたはページの「CSS」タブを開き、下記のいずれかのCSSを貼り付けてください。
共通ソースまたはページの「CSS」タブを開き、下記のいずれかのCSSを貼り付けてください。
総称フォントでゴシック体を指定
フォント名を直接指定せず、「ゴシック体のフォントを使用する」とだけ指定する方法です。
Safariで明朝体が表示されてしまう問題は、この指定だけで解決できます。
視認性や可読性を上げるためにブラウザの標準フォントを変更しているユーザーがアクセスした場合でも、その設定を上書きしないユーザーファーストな指定方法で、どんなページにもお使いいただけます。
Safariで明朝体が表示されてしまう問題は、この指定だけで解決できます。
視認性や可読性を上げるためにブラウザの標準フォントを変更しているユーザーがアクセスした場合でも、その設定を上書きしないユーザーファーストな指定方法で、どんなページにもお使いいただけます。
【Windows Chrome の表示】
body {
font-family: sans-serif;
}
UDフォントを優先
Windowsに標準搭載されているUDフォント「BIZ UDPゴシック」を優先するフォント指定です。
視認性が重視されるフォームなどにおすすめの指定です。
視認性が重視されるフォームなどにおすすめの指定です。
【Windows Chrome の表示】
body {
font-family: Arial, "Helvetica Neue", "BIZ UDPGothic", Meiryo, "Hiragino Kaku Gothic Pro", sans-serif;
}
UDフォントとは？
UDフォント（ユニバーサルデザインフォント）は、多くの人に読みやすいように工夫されたフォントです。
UDフォント（ユニバーサルデザインフォント）は、多くの人に読みやすいように工夫されたフォントです。
游ゴシックを優先
WindowsとMacの両方に標準搭載されている「游ゴシック」を優先するフォント指定です。
OS間でのフォント表示の違いを少なくしたい場合におすすめの指定です
OS間でのフォント表示の違いを少なくしたい場合におすすめの指定です
【Windows Chrome の表示】
body {
font-family: "Yu Gothic Medium", YuGothic, sans-serif;
}
