WordPressにAdobe FontsのWebフォントを導入する方法

Tips
目次

概要

WordPressで運用しているWebサイトに、Adobe FontsのフォントをWebフォントとして利用する方法について紹介します。

Adobe Fontsについて

Adobe Fontsは、Adobeが提供する、様々なフォントを利用できるサービスです。同じくAdobeの提供するPhotoshopやIllustrator、InDesignなどで使えるのはもちろん、Adobe以外のソフトウェアでも利用可能です。

Adobeのソフトウェア以外にも、フォントの利用方法はあります。それがWebフォントです。

通常であれば、WindowsやmacOS、Linuxなどで、OSにインストールされているフォントが異なるため、ブラウザで表示できるフォントにも制限があります。Webフォントを使えば、インターネット上からフォントをダウンロードするので、Webページで環境を気にせず同じフォントでWebページを表示できます。

Adobe Fontsは、有料のサービスです。私は、Adobe Creative Cloudを契約しているため利用可能ですが、Adobe Fontsの利用可能な契約がなければ、利用できません。もしも、Adobe Fontsを安く利用したい場合は、Adobe InCopyの単体サブスクリプション契約など、月額料金の安いAdobe CCプランを契約する方法があります。

このAdobe FontsをWordPressで構築したブログに利用しています。

Adobe Fontsの設定は少し複雑で、他のWebフォントの導入方法とは少し異なりました。そのため、導入までにかなり苦労しました。そこで、ここでは、WordPressでAdobe FontsのフォントをWebフォントとして、使う方法について紹介します。

Webフォントの導入

最初にWebページで使いたいフォントを探します。次の場所などから見つけましょう。

Artboard 1

フォントを選んだら、フォントの説明ページに「Webプロジェクトに追加」というボタンがあるので、それをクリックします。

image-10.png

Adobe FontsでWebフォントを使う場合、利用するWebフォントをWebプロジェクトという単位でまとめます。利用するのがひとつのフォントだけでも、ふたつ以上のフォントであっても同様です。

Webプロジェクトを作成していない場合は、適当な名前でつけて作成してください。

利用するフォントを全て追加したら次に進みます。

フォントを管理から、Webプロジェクトをクリックします。ここには、これまで作成したWebプロジェクトの一覧があり、Webプロジェクト毎に、Webページに追加するCSSかJavaScriptのコードが記述されています。

image-11-1024x92.png

ここに表示されている、CSSかJavaScriptをWordPressに記述します。通常、日本語が含まれている場合はJavaScriptを、英数字記号のみであれば、CSSを記述するようです。私は、記事を日本語で書いたブログにおいて利用するため、JavScriptが表示されていました。

これらのコードを記述する場所は、WordPressで利用しているテーマなどによって異なります。JavaScriptの場合は、headタグの中に記述するので、利用しているテーマなどの説明に従って記述します。私の環境では、管理ダッシュボードの「外観」>「テーマファイルエディター」から、コードを記述しました。CSSの場合も同様に、テーマなどの説明に従って記述します。

これで、Webフォントを読み込む設定が終わりました。

次に、Webページ上の文字のフォントとして、Webフォントを指定します。

Webフォントの指定は、通常のフォントを指定するように行います。CSSに次のようにコードを記述します。フォント名(a-otf-gothic-mb101-pr6n)のところは、各自のAdobe FontsでWebプロジェクトに追加したフォントの名前を指定してください。フォントの名前は、Webプロジェクトの編集機能から確認できます。

body {
	font-family: a-otf-gothic-mb101-pr6n, sans-serif;
}

image-12.png

間違いなどがなければ、これで設定は終わりです。

フォールバックを防ぐ方法

これまでの設定がうまくいけば、ちゃんとWebフォントが表示されているはずです。しかし、実際に表示してみると、Webフォントが表示される前に、何か別のフォントで文字が表示されているはずです。このような動作をFOUT(Flash of Unstyled Text)と呼びます。

これは、Webフォントをインターネットからダウンロードし終わるまでに時間がかかるために、ダウンロードが終わっていない間は、デフォルトのフォントが表示されているからです。

このような挙動を防ぐ方法はいくつかあります。例えば、font-displayプロパティをCSSに記述する方法です。しかし、私の環境では、これを記述してもちゃんと動作しませんでした。おそらくですが、JavaScriptでAdobe Fontsからフォントを読み込んでいるためにちゃんと動作していないのかと思います。CSSでフォントを読み込んでいる場合は、font-displayが使えるはずです。

そこで、私は次の方法でフォントのダウンロードが終わっていないときに、デフォルトのフォントを表示しないようにしました。次の内容をCSSに記述します。

.wf-loading {
	visibility: hidden;
}

.wf-active {
	visibility: visible;
}

.wf-loadingや.wf-activeは、Adobe FontsのJavaScriptが実行されるときに、状況に応じてhtmlタグに設定されるclass名です。

.wf-loadingは、フォントのダウンロード中に、htmlタグに設定されます。.wf-activeはフォントのダウンロードが終わり、有効となったときに、htmlタグに設定されます。

つまり、フォントのダウンロード中は、何も表示させないということで、visibilityプロパティにhiddenを設定し、Webフォントを使える状態になった際、表示させていなかったものを全て表示するように設定しています。

これで、デフォルトのフォントが表示されることはなくなりました。

注意

注意する点がひとつあります。それは、フォントのダウンロードが長引いた場合は、デフォルトのフォントが表示されるということです。

これは、WordPressに記述したJavaScriptのコードにある、次の記述が関係します。

scriptTimeout: 3000

ここでは、タイムアウトの時間が設定されており、デフォルトでは3000ミリ秒、つまり3秒の時間が経過した場合は、処理がタイムアウトされるということです。

もしも、タイムアウトの時間を変更したい場合は、ここの部分を修正してください。

しかし、基本的にはこの設定は変えない方がよいです。

理由として、アクセスした人に見せたいのは記事の内容であってフォントではないからです。表示に時間がかかるのであれば、読み込みを諦めた方がよいです。

さいごに

Adobe FontsをWebサイトに設定してみました。設定自体は、指示に従って進めていけば良いので、それほど迷いはしませんでした。

しかし、デフォルトのフォントが表示されるという問題が発生してしまい、この問題の解決に手間取りました。調べてみると、class名を使って対応しやすいようになっていましたが、その情報を得るまでが大変でした。

同じような悩みを抱える人の参考になれば嬉しいです。