WordPressで無料のモリサワWebフォントを使ってみよう！さくらインターネット

さくらインターネットでは、「モリサワのWebフォント」を無料で使えるサービスを提供しています。

WordPress専用のプラグインが用意されており、WordPressサイトであればより簡単に導入できます。Webフォントの利用条件は以下の通りです。詳しくは さくらインターネットのレビュー を参考にしてください。

• スタンダードプラン以上
• 一つのドメイン（サイト）のみ
• 上限は2.5万PV（超過すると訪問者のローカルフォントが利用されます）

それでは、Webフォントの設定方法を簡単に説明しましょう。

プラグインをインストールする

専用プラグインをインストールします。

このプラグインがなくても手動で導入できますが、WordPressサイトならプラグインを利用するべきでしょう。

メモ

ここでは紹介しませんが、WordPress以外なら手動（タグの挿入など）で導入可能です。

• ダッシュボードにログインします。
• メニューの「プラグイン」にある「新規追加」を選択します。
• キーワードに「typesquare」と入力します。
• 「TypeSquare Webfonts さくらのレンタルサーバ」が絞り込まれます。
• 「今すぐインストール」をクリックします。

• インストールが終わったら「有効化」をクリックします。

プラグイン一覧に「TS Webfonts for SAKURA RS」が追加されました。

これでモリサワのWebフォントをウェブサイトで利用する準備は完了です。

基本設定

• メニューの「TypeSquare Webfonts」を選択します。
• 予めカスタマイズされた複数のフォントセット（フォントテーマ）が用意されています。
• リストから選択することで、サイト全体のフォントが変更されます。

上級者向けカスタマイズを利用することで、ページ単位でのフォント設定も可能となります。

上級者向けのカスタマイズ

フォント設定クラス

このプラグインでは4種類のグループでフォントが管理されています。

それぞれでフォントを適用するタグやクラスを編集できます。

フォントテーマ個別表示設定

投稿・固定ページで記事ごとにフォントテーマを設定できます。（下図参考）

カスタムフォントテーマ

フォントを自由に組み合わせて、フォントテーマを作成することができます。

• メニューの「カスタムフォントテーマ」を選択します。
• カスタムフォントテーマの管理画面が表示されます。
• 「新しいカスタムフォントテーマを作成する」をクリックします。

• フォントテーマエディタが表示されます。
• フォントテーマ名（任意の文字列）を入力します。
• 4つのグループで管理されており、それぞれに異なるフォントを割り当てられます。
  • 下表のフォントから選べます。
• 設定を終えたら「フォントテーマを設定する」をクリックします。

• カスタムフォントテーマの一覧に追加されます。
• 複数のカスタムフォントテーマを作成することができます。

##フォントだけで変化するウェブサイトの印象

これらは同じコンテンツですが、フォントが違うだけで印象が大きく変わります。