WordPress個別ページでWebフォントを採用する
今回は、WebフォントをWordPress全体ではなく、個別のページで使用したい場合の設定方法をご説明します。
Webフォントの準備
Webフォントは、
でご説明した通りにフォントファイルを準備します。
ただし、今回は"fonts"フォルダをテーマフォルダ内のさらにCSSフォルダの中に作り、そこへフォントファイルをアップロードします。
こんな感じになります。
Custom CSS and JavaScriptを使う
続いて、"Custom CSS and JavaScript"というプラグインを検索し、インストールして有効化します。
すると、投稿を編集するページの下の方に、「カスタムフィールド」という編集領域が出現します。
ここに新たに読み込んで欲しいCSSを定義します。
今回は、"test.css"という新たなCSSファイルを作成します。
中身は以下の通りです。
[php]
/*
Theme Name: WordPressでフリーオリジナルフォント
*/
/* Ligature Symbols */
@font-face {
font-family: 'LigatureSymbols’;
src: url('./fonts/TSM_font001.woff’) format('woff’),
url('./fonts/TSM_font001.otf’) format('opentype’);
font-weight: normal;
font-style: normal;
}
[/php]
これを、テーマフォルダ内のCSSフォルダの中にアップロードします。
このようになります。
そして、投稿の編集画面下方にあるカスタムフィールドに戻り、名前に"custom_css"（好きな名前を入れる）と入力、値に"wp-content/themes/twentyfourteen/css/test.css"（test.cssのアドレスです）を入力し、「カスタムフィールドを追加」をクリックします。
これで、この個別記事内でフォントファイルが読み込めるようになりました。
個別記事内でフォントを指定する
あとは記事内のフォントを変更したい文字列を、以下のように"<p style="font-family: 'LigatureSymbols’;">"と"</p>"で囲みます。
[php]
<p style="font-family: 'LigatureSymbols’;">（フォントを変更したい文字列）</p>
[/php]
これで好きな文字列のフォントを変更することができました！