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つのグループで管理されており、それぞれに異なるフォントを割り当てられます。
    • 下表のフォントから選べます。
  • 設定を終えたら「フォントテーマを設定する」をクリックします。
フォント  
明朝体 リュウミン R-KL / リュウミン M-KL / 見出しミンMA31 / A1明朝
ゴシック体 新ゴ R / 新ゴ M / ゴシックMB101 B / 見出しゴMB31 / ナウ-GM
丸ゴシック体 じゅん 201 / じゅん 501 / 新丸ゴ
デザイン書体 フォーク R / フォーク M / 丸フォーク R / 丸フォーク M / カクミン R / 解ミン 宙 B / シネマレター / トーキング / はるひ学園 / すずむし / G2サンセリフ-B
装飾書体 新丸ゴ 太ライン
筆書体 正楷書CB1 / 隷書101
UD書体 UD新ゴ R / UD新ゴ M / UD新ゴ コンデンス90 L / UD新ゴ コンデンス90 M
  • カスタムフォントテーマの一覧に追加されます。
  • 複数のカスタムフォントテーマを作成することができます。

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

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

関連記事