WordPress個別ページでWebフォントを採用する

今回は、WebフォントをWordPress全体ではなく、個別のページで使用したい場合の設定方法をご説明します。

Webフォントの準備

Webフォントは、

WebフォントをWordPress全体で使用する
Webフォントの準備 まずは、使いたいと思っているWebフォントを準備しなければなりません。 どこからか入手したWebフォントでもい...

でご説明した通りにフォントファイルを準備します。

ただし、今回は”fonts”フォルダをテーマフォルダ内のさらにCSSフォルダの中に作り、そこへフォントファイルをアップロードします。

こんな感じになります。

Custom CSS and JavaScriptを使う

続いて、”Custom CSS and JavaScript”というプラグインを検索し、インストールして有効化します。

すると、投稿を編集するページの下の方に、「カスタムフィールド」という編集領域が出現します。

ここに新たに読み込んで欲しいCSSを定義します。

今回は、”test.css”という新たなCSSファイルを作成します。

中身は以下の通りです。


/*
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;
}

これを、テーマフォルダ内のCSSフォルダの中にアップロードします。

このようになります。

そして、投稿の編集画面下方にあるカスタムフィールドに戻り、名前に”custom_css”(好きな名前を入れる)と入力、値に”wp-content/themes/twentyfourteen/css/test.css”(test.cssのアドレスです)を入力し、「カスタムフィールドを追加」をクリックします。

これで、この個別記事内でフォントファイルが読み込めるようになりました。

個別記事内でフォントを指定する

あとは記事内のフォントを変更したい文字列を、以下のように”<p style=”font-family: ‘LigatureSymbols’;”>”と”</p>”で囲みます。


<p style="font-family: 'LigatureSymbols';">(フォントを変更したい文字列)</p>


これで好きな文字列のフォントを変更することができました!

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする