ブログのサイト名の箇所を印象強くしたいなと思って、フリーフォントを適用してみました。
使用したフォントはもじワク研究 様(https://moji-waku.com/)よりダウンロードしました。
プラグインを入れる方法などもありましたが、私は サーバーにフォントファイルをアップロード→cssで反映 という形をとりました。
最初は上手くいかず、何度キャッシュを消してページをリロードしてもフォントが変わりませんでした。
しかしセレクタの指定やパスの書き方をとっかえひっかえしているうちに、ようやく無事にフリーフォントが反映されたので、ここにやり方をまとめておこうと思います。
①フリーフォントのファイルを用意する まずは適用するフリーフォントを決める。
サイトで使用したいフォントを選びます。サイトのイメージに合ったものを選びましょう。
ここで気をつけるのは、
注意ポイント
- 使いたい文字が含まれているか
日本語のみ、アルファベットのみのフォントも多いです。目的の文字が入っているかきちんと確認しましょう。 - 利用規約にもきちんと目を通すこと！
大抵の場合フリー素材には 個人利用のみ可、商用利用不可、使用時報には報告必須 など、それぞれにルールが設けられています。 利用規約にも目を通しましょう。 - 再配布、改変が禁止されていないか
サーバーにファイルをアップロードする、という行為は再配布に当たる場合があります。 また、ファイルの形式を「.woff」に変換したりすることは改変とみなされることもあります。 それぞれ禁止されていないか、フォントの利用規約を読み確認し、必要であれば配布元に確認した上で使いましょう。
の3点です。
②フォントのファイル形式を変換する
使いたいフォントが「改変」禁止の方、.ttfや.otfのままで使いたい方はこの項目は読み飛ばして下さい。
フォントのファイル形式を.woffにすると、読み込みが速くなるなどのメリットがあります。
詳しくはこちら
WOFF (Web Open Font Format) - 開発者ガイド | MDN https://developer.mozilla.org/ja/docs/Web/Guide/WOFF
ファイル形式が.otfや.ttfの場合には、.woffに変換して使いましょう。
ファイル形式の変換は、私はこちらを利用しました。 https://convertio.co/ja/ttf-woff/
変換が終わったらファイルをダウンロードして、次へ進んでください。
③フォントファイルをサーバーにアップロードする
使いたいフォントのファイル(.otfでも.woffでも可)をFTPソフトなどを使用してサーバーにアップロードします。
アップロードする場所は
/ドメイン名(サイトのURL)/public_html/wp-content/themes/使っているテーマ
です。
今後また別のフォントも入れるかもしれないので、ここにfontsというフォルダを作っておきます。
なので、最終的なフォントファイルへのパスは
/ドメイン名(サイトのURL)/public_html/wp-content/themes/使っているテーマ/fonts/フォントファイル
になります。
③フォントを反映させる
CSSで指定するか、AFFINGER管理メニューから設定してフォントをサイトに反映させます。
CSSで指定する場合
編集するCSSは、使用テーマ内にあるstyle.cssです。ココ↓
/ドメイン名(サイトのURL)/public_html/wp-content/themes/使っているテーマ
この中に下記のコードを加えます。
@font-face {
font-family:"フォントの名前";
src: url( "fonts/フォントファイル名")format('ファイル形式');
}
フォントを反映したい箇所のセレクタ {
font-family: "フォントの名前";
}
ここでは各項目を下記のように定義します。
フォントの名前
拡張子を含まないフォント名。この名前を使ってfont-familyでフォントを指定します。
フォントファイル名
fontsディレクトリに置いたフォントファイルの名前です。ドット以下の拡張子の部分まで含みます。
ファイル形式
フォントファイルの種類によって決められた形式を入力します。woff、opentypeなどがあります。
WWWクリエイターズ 様の以下のページの「フォントの形式について」という項目に記載されています。
http://www-creators.com/css-prop/font-face
フォントを反映したい箇所のセレクタ
フォントを変更したい部分を指定します。
GoogleChromeをお使いの場合は下記の記事に簡単にセレクタを調べる方法を載せていますので、ご参照ください。
-
-
【簡単】CSSセレクタを調べる方法【Google Chrome用】
CSSファイルを編集している際に、要素の指定がうまくいかないことがあります。 検索してもセレクタは人によって違うので、コピペでOK！というわけにもいかず… 要素の色の指定やサイズ、幅の調整、レイアウト ...
続きを見る
注意ポイント
※ここで注意して頂きたいのが、フォントファイルへのパスを絶対に間違えないことです。
CSSが反映されない原因としてよく挙げられるのが「;」の付け忘れやキャッシュの問題ですが、私の場合はファイルパスの指定ミスでした。
いくらChromeのデベロッパーツールで確認しても、CSSは読み込まれているし、打ち消し線もついていないし、Consoleタブの「GET net::ERR_ABORTED 404(NOT FOUND)」が消えない。
よく見たら、上記のソースコードのfontsの前に/が入っていました。
色々触っているうちにいつのまにか残ってしまっていたようです。
src: url( "/fonts/フォントファイル名")format('ファイル形式');
このスラッシュは必要ありませんので、お気をつけください。
最後に編集したstyle.cssを保存し、ブラウザでページをリロードしてきちんと反映されているか確認しましょう。
もしされていないようであれば、キャッシュの削除やコードの確認などを行ってみてください。
AFFINGERの管理メニューからフォントを指定する場合
AFFINGER管理メニューでは、[デザイン]のフォントの種類の項目があり、「その他（優先）」の欄で希望のフォントをfont-familyプロパティを使って指定することで、フリーフォントを使用することができます。
しかし、この場合もサーバーに置いたフリーフォントを使えるようにするために、style.cssへの追記が必須となります。
以下のコードをコピーして、style.cssにペーストして下さい。
@font-face {
font-family:"フォントの名前";
src: url( "fonts/フォントファイル名")format('ファイル形式');
}
ここでの各項目の定義も「CSSで指定する場合」にて記載したのと同様に以下のようになります。
フォントの名前
拡張子を含まないフォント名。この名前を使ってfont-familyでフォントを指定します。
フォントファイル名
fontsディレクトリに置いたフォントファイルの名前です。ドット以下の拡張子の部分まで含みます。
ファイル形式
フォントファイルの種類によって決められた形式を入力します。woff、opentypeなどがあります。
WWWクリエイターズ 様の以下のページの「フォントの形式について」という項目に記載されています。
