さくらのレンタルサーバを契約していると「株式会社モリサワ」の提供するWebフォントサービス「TypeSquare」のフォントから30種類の書体をページビューに上限はありますが 無料で使用できます。 今回はその設定方法と実際の表示書体のサンプルを掲載します。

さくらのレンタルサーバー付属のモリサワWebフォントの無料設定方法と表示比較

1.モリサワのWebフォントとは?

株式会社モリサワが提供する「TypeSquare」というサービスを利用しています。さまざまな書体をWebフォントとして利用できるWebフォントサービスです。Webフォントとは、インターネットを介してフォントを配信する技術で、閲覧者のコンピュータにインストールされていないフォントでもブラウザ上で表示することができます。

2.2019年1月31日より表示回数上限が従来の3倍に!

さくらのレンタルサーバーにおける、モリサワWebフォントですが、表示回数の上限が設定されています。今までは月間2.5万ページビューだったのですが、2019年1月31日より3倍の7.5万ページビューに拡充されました。また設定可能なサイトも3個までとなりました。

3.モリサワWebフォントの設定方法

(1) サーバーコントロールパネルにログインする

さくらインターネットのサーバーコントロールパネルにログインします。

(2) Webフォントの設定ページに移動
「運用に便利なツール」から「Webフォント」をクリックします。
(3) Webフォント利用ドメインの設定

Webフォントの設定ページで、Webフォント利用ドメインの設定のドメイン設定で「お選びください」をクリックして、ドメインのリストを表示し、設定したいホームページのドメインを選んで「設定」をクリックします。登録されると「登録ドメイン」に表示されます。

(4) ワードプレスにログイン

設定したいホームページのワードプレスのダッシュボードにログインします。

(5) プラグイン TS Webfonts for SAKURA RS 有効化

プラグインの「インストール済みプラグイン」をクリックし、「TS Webfonts for SAKURA RS」を有効化します。もしインストール済みプラグに無ければ、新規追加から「TS Webfonts」と入力し下記「TypeSquare Webfonts さくらのレンタルサーバー」を検索してください。

(6) TypeSquare Webfonts の設定
ダッシュボードのメニューにTypeSquare Webfontsが追加されるので、クリックします。

モリサワWebフォントを組み合わせたフォントテーマが8種類あります。 フォントテーマを選んで「フォントテーマを変更する」をクリックすると適用されます。

4.モリサワWebフォントの表示比較

それぞれのフォントテーマの表示サンプルを比較画像として下記に表示します。

(1) ベーシック
(2) ニュース
(3) ファッション
(4) ポップ
(5) 和風
(6) モダン
(8) スマホ

5.モリサワフォントを組み合わせる

フォントテーマで「新しくテーマを作成する」を選んで、モリサワフォントを組み合わせて、オリジナルのフォントテーマを作成することが可能です。適用個所をタイトル、リード、本文、太字と分けて設定できます。

6.モリサワWebフォントの利用状況表示

さくらのレンタルサーバーのサーバーコントロールパネルの「Webフォント」から、 モリサワWebフォントの利用状況(利用ページビュー数)を表示できます。こちらでWebフォントが7.5万ページビューに到達しそうかどうか前日までのデータで確認できますし、そもそも、Webフォントが使えなくなったとしても、OS標準のフォントで表示されるので、無料ですし設定してみると良いと思います。

さくらのレンタルサーバーを借りている方への無料サービスですので、利用しない手はないです。

以前は2.5万ページビューまでだったので微妙でしたが、今は7.5万ページビューで以前より余裕が出ましたし。おすすめできます。

sakura-morisawa-web-font-logo

さくらインターネット モリサワWebフォント 無料設定&表示比較

さくらのレンタルサーバを契約していると「株式会社モリサワ」の提供するWebフォントサービス「TypeSquare」のフォントから30種類の書体をページビューに上限はありますが...
PHP_warning

Warning: A non-numeric value encountered in 警告対策

ワードプレスに色々なプラグインを入れて利用している中で、サーバの PHP バージョンによって、「 Warning: A non-numeric value encountered...

Pin It on Pinterest