Webフォント導入に苦戦した時の話
そんなに難しくないだろうと思って作業していたら見事にハマった経験が過去にあったので。
Webフォントがうまく反映されない時の対処方法等が書かれたサイトもひたすら熟読したのですが、結局どれも当てはまらず、最終的に自己解決した思い出。
あまりにも初歩的な原因だったせいか、他サイトでは取り上げられていなさそうだったので、備忘録として……。
前提条件をもとに、ざっくりと導入の流れを説明、最後に反映されなかった原因の話をしています。
原因究明をする際は、手当たり次第何かを試すよりも、トラブルの原因と関係ないことを先にハッキリさせて、そこから消去法で解決する方が効率が良いということを学んだ気がします(´；ω；`)
環境はエックスサーバー
Webフォントを導入するにあたってハマった原因はエックスサーバーならではの間違いが原因でした。
（エックスサーバーそのものは全く悪くありません。エックスサーバーは安定感のあるとっても良いサーバーです）
やりたいこと・前提条件
- 自分の好きなフリーフォントをWeb上でも使いたい
- WordPressを使用
- サーバーはエックスサーバーを使用
- FTPソフトを使用してサーバーに直接フォントデータを置く
- cssの@font-faceを使用
Webフォントの導入方法自体はいくつかあり、Googleフォントなどの一部のフリーフォントは、<head></head>内にタグを挿入することでWebフォントとして使用することが出来ますが、今回はcssの@font-faceを使ってWebフォントを導入したいと思います。
あとエックスサーバーで用意されたWebフォントではなく、あくまでも他サイトからダウンロードしてきたフリーフォントを使用したい(`・ω・´)
Webフォント導入前の下準備
まずは使用したいフォントデータを用意
フリーフォントを自分のPCにダウンロードします。
そうすると大体「.ttf」という拡張子のフォントデータがダウンロードされると思います。
例として「sample-font.ttf」というフォントデータをダウンロードしたとします。
「.ttf」を「.woff」に変換する
まずは、フォントデータをWebフォント用に変換。
変換ソフトは「WOFFコンバータ」がわかりやすくておすすめです。
WindowsとMac、どちらにも対応しているところが良いですね(＾ω＾)
下にスクロールするとダウンロードのリンクがあります。
ソフトの使い方は……割愛させていただきます(・ω・；)
変換の際に、「.eotにも変換する」等のチェックポイントがあるので、そこもチェックすると「.woff」と「.eof」のフォントデータが作成されます。
これでひとつのフォントで３種類の拡張子のフォントデータが用意されました。
sample-font.ttf
sample-font.eot
sample-font.woff
フォントをサーバーへアップロード
フォントをアップロードする場所
サーバーのどこに置くのがベストか？については色々とあると思いますが、とりあえずWordPressの中に最初から存在する「fonts」というディレクトリにアップロードする前提で進めます。
FTPソフトを使って、用意したフォントデータを以下のディレクトリにアップロードします。
https://★★★★★.com （自サイトのドメイン）
public_html
wp-includes
fonts
sample-font.eot
sample-font.ttf
sample-font.woff
CSSファイルにWebフォント導入のための記述をする
管理画面の中にあるカスタマイザーに記述するなら以下の手順で。
『外観』→『カスタマイズ』→『追加CSS』
使用しているテーマが、子テーマの使用を推奨しているなら子テーマへの記述でも問題ありません。
@font-faceの記述方法
cssに以下のコードを記述します。
@font-face {
font-family: "sample-font"; /* 任意のフォント名 */
src: url("https://★★★★★.com/wp-includes/fonts/sample-font.eot") format("eot"), url("https://https://★★★★★.com/wp-includes/fonts/sample-font.ttf") format("truetype"), url("https://https://★★★★★.com/wp-includes/fonts/sample-font.woff") format("woff");
}
.sample-class { /* 任意のクラス名 */
font-family: "sample-font"; /* @font-faceで付けたフォント名を指定 */
}https://★★★★★.comには自サイトのドメイン（URL）が入ります。
あとは、用意したクラスをhtml内で使用するだけです。
<p class="sample-class">サンプル文です。</p>サイト全体にcssを反映させたい場合は、「.sample-class」以降の記述を以下のようにします。
body { /* 任意のクラス名 */
font-family: "sample-font"; /* @font-faceで付けたフォント名を指定 */
}以上でWebフォントの導入が完了！の筈だったのですが……自分はここでハマってしまいました(´；ω；`)
反映されなかった原因
エックスサーバーはドメインのすぐ後に「public_html」というディレクトリがあって、その中にWordPressが入っています。
なので@font-faceに記述するURLも「https://★★★★★.com/public_html/wp-includes/fonts/sample-font.woff」としてしまったのですが、それが大きな間違いでした(´；ω；`)
「https://★★★★★.com/wp-includes/fonts/sample-font.woff」が正しいURLで「public_html」の記述は要りません。
最初の方で、もしかして「public_html」の記述って不要なのでは？と気づいて消してみたりしたのですが、なぜかその時はうまく反映されず、そこから迷走してハマってしまいました。
結果的に、「なんだかよくわからないけどもう一度、書き直したらうまく反映された」という感じで解決しました(´・ω・`)
フォントが反映されない時に考えること
私の場合は、ハマってしまった理由は色んな原因を一気に疑い過ぎたことでした。
「public_html」の有無も怪しいけど、そもそもフォントの置き場は本当にここで良いのか？等、他のことに同時に気を取られたことで、合っているところまでいじってしまい最終的にハマって抜け出せなくなってしまいました。
フォントが反映されないことと直接関係ないこと
知識がある人からすると、「当たり前に関係ないこと」「そもそもこんなこと疑わない」と思うかもしれませんが、手探りな状況での作業だと関係ないことまで疑い出してハマってしまうものだと感じました。
「これはフォント反映の不具合と関係ないですよ」というものが早い段階でハッキリとしていれば原因究明がしやすいと感じたのでまとめてみました。
- @font-faceに記述するパス（URL）は、絶対パス、相対パスどちらでも問題ない
- パスさえ合っていればフォントの置き場はどこでも問題ない（状況によって例外はありますが）
- フォント名はローマ字、日本語どちらでも問題ない
- フォント指定やURLで使うクォーテーションはシングル、ダブルどちらでも問題ない
フォントが反映されない時に疑うべき原因
- CSS等の記述ミス
- @font-face内のURL
- SLL設定はどうなっているか（http://なのかhttps://なのか？）
- クロスドメイン制約
反映されない原因は月並みですが、フォントが置いてある場所のURLをきちんと指定できているか？がやはり大事です。
「クロスドメイン制約」の詳細は割愛させていただきますが、記述に間違いがないのに反映されなければ、ここも疑った方が良いかと思います。
「.htaccess」を編集することになるので、慎重に作業すること、作業前にバックアップを取ることを強くおすすめします。
原因探しは消去法が大事
あれやこれやと色んな可能性を疑い過ぎて迷走してしまいましたが、そのおかげでWebフォント導入の際に疑うべき原因と逆に原因と関係ないことが自分なりに理解できた良い経験でした(´・ω・`)
