Cherry Pie Web > ブログ > 技術記事 > WordPressにモリサワTypeSquareのWebフォントを適用するのは超簡単

WordPressにモリサワTypeSquareのWebフォントを適用するのは超簡単

2016年9月22日

—

業務でWeb制作やDTP制作をしている方は、モリサワの全書体が使える「モリサワパスポート」を契約されていることが多いと思います。

モリサワは「TypeSquare」というWebフォントサービスも展開していて、モリサワパスポート契約者はTypeSquareのスタンダードプラン・セルフホスティングプランに準じるプランを追加料金なしで使用できます。
利用可能書体数・利用ドメイン数が無制限で、年1,000万PVまで使えるので、個人サイトであれば十分でしょう。
かつては日本語Webフォントは遅いと言われていましたが、サブセット化・キャッシュ・CDNの利用などによる速度改善が行われており、今では十分実用的です。

あと、DTP出身の人にはたまらない機能として、TypeSquareのWebフォントはCSSで文字詰めの指定ができるんです！
「文字詰め」の使い方 | TypeSquare Blog

TypeSquareのWebフォント利用方法も、とても簡単です。
契約者・プランごとに指定されているJavaScriptをHTMLで読み込み、CSSのfont-familyに使いたい書体を設定するだけです。

では、これをWordPressで使いたい場合はどうすればよいのでしょうか。
問題になるのは、「JavaScriptを読み込む」という部分です。

ネットで検索をしてみると、

『header.php に指定されたタグをコピペすればOK』

と書いてある記事がいくつか見つかります。
しかし、この方法はWordPressでは非推奨の方法です。

WordPressでは、JavaScriptの読み込みはテンプレートに直接書くのではなく『functions.phpの中でwp_enqueue_scriptで読み込みなさい』ということになっています。
wp_enqueue_scriptを使用することで、WordPressがスクリプトの読み込み順序を適切に処理してくれたり、引数がつくことでキャッシュ効果が適切になったり、他のプラグインから停止出来たりしますから、TypeSquareのスクリプトもこの方法で読み込むべきですよね。

ところが、なぜかfunctions.phpに下記のように設定しても、TypeSquareのフォントが有効にならないのです。

add_action( 'wp_enqueue_scripts', 'typesquare_fonts' );
function typesquare_fonts() {
    wp_enqueue_script( 'typesquare', '//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxx');
}
※xxxxxxxxxxには、配信IDが入ります。

でも、header.phpに直接書くと、ちゃんと有効になります。

<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?xxxxxxxxxx" charset="utf-8"></script>

ソースコードを見てみると、wp_enqueue_scriptでもちゃんとスクリプトは読み込まれています。
しかし、どうやら認証されていないようなのです。

何が悪いのやらさっぱり見当がつかずに、最初のうちは仕方なくheader.phpにタグを直書きしていたのですが、先日、超簡単な解決方法を見つけました。

なんと、TypeSquare純正の公式プラグインがあったんです。

TS Webfonts for Standard Plan — WordPress Plugins

導入方法はいたって簡単です。

先にTypeSquareで利用登録を済ませておいてください。
プラン設定にドメイン登録が必要です。
サブドメインは別ドメインとみなされます。wwwあり／なしは別ドメインになりますので、両方登録しておきましょう。
プランによっては、使用フォントの登録も必要です。
WordPressの管理画面「プラグイン」の「新規追加」で、「typesquare」を検索します。
「TS Webfonts for Standard Plan」が見つかったら、「今すぐインストール」でインストールし、「有効化」します。
左メニューバーに「TypeSquare Webfonts」という項目が追加されるので、クリックして設定画面を開きます。
ログインメールアドレス・パスワード・配信ID（スクリプトのxxxxxxxxxx部分）を入力して、「変更する」をクリックします。
認証状況が「認証済み」になれば、TypeSquareのWebフォントが利用できるようになります。

認証されると、TypeSquare Webfonts設定画面で、フォントテーマを指定したり、いくつかの設定ができたりします。
フォントテーマは設定済みのものを使ってもいいですし、自作もできます。
普通の使い方であればCSSを書き換える必要もなく、管理画面からフォントを変えて楽しめるのです。

なお、TS Webfonts for Standard Planプラグインは、TypeSquareの無料プランでも使用できます。
使用書体やPV数が大きく制限されますので実用的ではありませんが、お試しで入れてみるのはアリだと思います。

（2016年9月22日　修正）
wp_enqueue_script が、wp_enqueue_style になっていたのを修正しました。（恥ずかしい）
ただ、それでもfunctions.phpへの記述では上手く動きません。

（2016年9月22日　追記）
wp_enqueue_scriptでバージョンを出力させない方法が見つかったので、プラグインなしでも動作させることができるようになりました。
また別記事で書きたいと思います。

この記事を書いた人

川井昌彦: FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き

1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数