お問い合わせはコチラから

【CSS】@font-faceの相対パス指定【ローカルフォント】

サイト運営

この記事は、フォントをWebサーバーにアップロードし@font-faceでCSSで指定するときにフォントの格納場所を指定したい、相対パスで指定したいという人に参考になる記事です。

@font-faceの相対パス指定は結構ハマる

@font-faceで相対パス指定するぞーって思って、しているつもりが全然有効にならずに結構ハマりました。

そもそも相対パスの基準はどこ?

相対パスというのは、@font-faceを記述しているCSSからの相対位置になります。

もし、子テーマのstyle.cssに@font-faceを追記しているのであれば、子テーマのテーマフォルダの直下にstyle.cssがあれば、そこが基準になる。

相対パス指定の例

もし、子テーマの直下にfontsディレクトリを作成しフォント群をuploadしているのであれば、次のような相対パスになる。

@font-face {
font-family: 'フォント名';
src: url('相対パス指定');
font-weight: normal;
font-style: normal;
}

相対パスがCSS基準であることを理解すればそれほど難しくない。

なぜ相対パス指定でトラブルの?

問題となるのが、テーマの設定などにあるカスタムCSSという箇所に@font-faceを記述した場合にそのCSSが何処にあるのか実は解っていなかった時である。

相対パスの基準が分からなければ指定そのものができないので、自分の場合はそれでハマってしまった。

テーマのCSSカスタマイズの格納場所を確認する方法は?

検証ツールなどで、記述したCSSを表示させて、絶対パスでどこに格納されているのか確認すると、相対パスを決めることができる。

Step1:検証ツールを立ち上げる

Chromeの場合は、右クリック⇒検証(I)か F12を押して検証ツールを起動します。

Step2:@font-face以外のCSSカスタマイズを探す

@font-faceを記述したCSSに含まれるその他のCSSカスタマイズを探します。

Step3:@font-faceのCSSファイルの場所を確認

そのCSSがどのファイルに記述されているのか検証ツールで確認します。

これでCSSカスタマイズのファイルの格納場所がわかったので、その位置を相対位置の基準として@font-faceを指定すればOKです。

有料テーマの特殊な事例

子テーマでCSSカスタマイズしているのにそのカスタマイズの内容が親テーマの場所にCSSとして格納されているケースもありました。

そのようなケースだと最終的に格納されている場所を探さないと相対パス指定がうまくいきません。

子テーマの直下にfontsディレクトリを掘って、そこにフォントファイルを置いています。@font-faceを記述したCSSは親テーマのどこかにあって、そこを基準に子テーマのfontsディレクトリを指定しないと認識しませんでした。

@font-face {
font-family: 'フォント名';
src: url('../../themes/子テーマ/fonts/フォントファイル.eot?iwrsx2');
font-weight: normal;
font-style: normal;
}

まとめ

今どきはwebフォントが全盛なのであまりサーバーにフォントファイルをアップロードする場面は少ないかもしれませんが、iconフォントなどを追加で利用したい場合などは結構使う場面があると思います。icomoonでiconフォントに変換してアップロードすることは結構あると思います。

そんな時に相対パス指定がうまくいかない時に思い出してみてください。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました