さくらインターネットでWebフォントを使う

さくらインターネットのレンタルサーバーでもりさわのWebフォントが無料で使えるということで早速試してみました。

プラグインとして利用する方法とHTMLに直接記述する方法があります。

WordPressをクイックインストールした場合はすんなり成功したのですが、手動でインストールしたサイトがうまくいかなかったのでHTMLに直接記述する方法を試しました。
テーマによってはプラグインではうまくいかに場合もあるようです。

〇プラグインを使う方法
1.さくらインターネットのサーバーコントロールパネルからWebフォントの設定を行う
設定方法
(1)サーバーコントロールパネルの「運用に便利なツール」-「Webフォント」クリック
(2)Webフォント利用ドメインの設定、独自ドメイン設定で設定したいドメインを選択し「設定」ボタンクリック

2.プラグインのインストール
クイックインストールの場合、プラグインはインストール済みなので「TS Webfonts for SAKURA RS」を有効化する。
手動でWordpressをインストールした場合プラグインの新規追加で「TypeSquare Webfonts Plugin for さくらのレンタルサーバ」と検索し、プラグインを追加します。

詳しくは、さくらインターネトでWebフォントを使用する方法を参考にしてください。

〇HTMLに直接記述する方法
1.さくらインターネットのサーバーコントロールパネルからWebフォントの設定を行う
設定方法
(1)サーバーコントロールパネルの「運用に便利なツール」-「Webフォント」クリック
(2)Webフォント利用ドメインの設定、独自ドメイン設定で設定したいドメインを選択し「設定」ボタンクリック

2.Wordpressのテーマの編集
編集方法
(1) テーマヘッダー header.php 編集
</head>  の前に以下追加
<script type=”text/javascript”src=”//webfonts.sakura.ne.jp/js/sakura.js”></script>

(2)CSSを編集
※今回はテーマのカスタマイズでCSSを追加しました。
例)
h3 の slide-title クラスにWebフォントを使用する場合
h3.slide-title{
font-family: “解ミン 宙 B”;
}

2018年6月23日時点

SNSでもご購読できます。