Webフォントを利用するには？

では、Webフォントはどうでしょうか。

Webフォントは、フォントファイルがインターネット経由で提供されるサービスです。フォントが端末にインストールされる必要がないため、ウェブサイトで指定したWebフォントのまま、閲覧者の端末に表示することができます。
例えば、Google Fontsより提供されている日本語に対応した「Kosugi Maru」「Noto Sans JP」「Noto Serif JP」を指定して確認すると、下図のように、端末に関わらず同じフォントで表示できることが確認できます。

Webフォントを利用する前に、メリット・デメリットを確認しましょう。

Webフォントのメリット・デメリット

メリット

• 端末に関わらず同じフォントで表示が可能。
• フォントを含めて画像化している制作作業を、Webフォントでテキスト化することが可能。
• 画像をテキストに変更することで、編集が容易、アクセシビリティやSEO的にも優位。

デメリット

• 費用が生じる場合がある（有料サービスの場合）。
• フォントファイルの読み込みに時間がかかる場合があり、ページの表示速度に影響がある。
  ※Webフォントを使用する箇所が多い場合（Body全体にWebフォントを使用する場合など）は、制作時にPC、スマートフォンで表示速度を確認しましょう。

次に、上記のWebフォントのメリット・デメリットも考慮した上で、Webフォントを利用するべきかどうか検討しましょう。Webフォントを利用する場合、Webフォントサービスを利用する方法が一般的ですが、CMS ant2ではフォントモジュールを設定して利用することができます。

Webフォントサービスを利用する

Webフォントサービスには、Google Fontsのように無料で提供されるサービスもありますが、モリサワが提供する「TypeSquare」やAdobe Systemsが提供する「Adobe Typekit」のように、提供内容によって有償となるサービスもあります。Webフォントサービスを利用する場合は、どんなフォントが利用できるのか、費用がかかるかどうか、商用利用は可能か、日本語に対応しているかなど、予め提供されるサービス内容も合わせてご確認の上、ご検討ください。
利用方法につきましては、各Webフォントサービスサイトをご確認の上、ご対応ください。

• 参考：Webフォントサービス
  Google Fontsサイト
  TypeSquareサイト 
  Adobe Typekitサイト 

CMS活用：フォントモジュールを利用する

CMS ant2では、フォントモジュールにより、サイトロゴ、サイト全体、見出し（H1～H６）、メニューを指定して、Googleフォント（Google Fonts、Google Fonts 日本語）を設定することができるようになりました。
→新モジュール「フォントモジュール」をリリースフォント設定

弊社提供の公式テンプレートにつきましては、そのデザインに合うようにフォントを指定しておりますが、「H1の見出しはWebフォントを利用したいな」「メニューはWebフォントで少し個性を出したい」などのご希望にもお応えできるように、簡単に設定を行うことができます。

操作マニュアルの設定をご確認いただき、ぜひフォントモジュールをご活用ください。
→操作マニュアル「フォント設定」

実装事例

サイトロゴ・H1・メインメニューをGoogle Web Fontsの「Kosugi Maru」に設定しました。
PCの表示（上図：左上ロゴ、メインビジュアル上のH1、上部メニュー）、およびスマートフォンの表示（下左図：メインビジュアル上のロゴとH1、下右図：ハンバーガーメニュータップ後のメニュー）をご確認ください。

※サイト全体で使用するフォントは、サイト内に複数フォントを使用することで、統一感がない印象を受けてしまうこともあります。サイト内のフォントは2種類程度が理想的です。

■PC