「Webフォントがサイトに反映されない」こんなトラブルに焦ったことはありませんか？
サイトのデザインを引き立てる有料Webフォントは、FONTPLUS（フォントプラス）やAdobe Fontsなどのサービスでよく利用されますが、設定の変更や環境の変化によって、突然フォントが表示されなくなることがあります。
今回は、私が実際に経験したフォントトラブルの体験談を交えながら、Webフォントがうまく表示されないときの原因とその解決策についてご紹介します。
有料Webフォントのトラブル実例
実際の案件で、クライアントから「ドメイン移管とサーバー移行をお願いしたい」という依頼を受けた際に「フォントが反映されない」トラブルに直面しました。
原因を調べてみたところ、クライアント側で有料Webフォントのライセンスを所持していないために、フォントが正しく表示されていなかったのです。
また、そのサイトを制作した以前の制作会社がフォントのライセンスを保持しており、その会社とは連絡が取れず、ライセンスの引き継ぎもできない状況でした。
このように、フォントのライセンスが制作会社側にある場合、サーバー移行やドメイン移管作業を行う際にWebフォントが正しく表示されなくなるリスクが発生します。
制作時点でフォントライセンスをクライアント側に適切に引き継ぐことが、トラブルを防ぐうえで非常に重要だと感じた経験です。
Webフォントが表示されない主な原因とその解決策
クライアントにドメイン移管やサーバー移行の依頼をされた際、Webフォントが表示されない原因として考えられるポイントは次の通りです。
(1) ライセンスが特定のドメインに紐づけられている
フォントプロバイダーによっては、特定のドメインやサーバーのみで利用できるライセンス条件があるため、移管後にライセンスが無効になることがあります。
(2) リファラー設定によるアクセス制限
フォントライセンスにはアクセス元の制限がかかっている場合があり、新しいドメインやサーバーに移行するとリファラー設定が適用されないケースがあります。
(3) クライアント側でライセンスを未取得
制作会社が所持しているライセンスに依存したフォント設定の場合、移行後にクライアント側で新たにライセンス取得が必要になります。
このような背景があるため、クライアントに移管や移行の依頼を受けた際には、事前にフォントライセンスの管理について確認を取ることが重要です。
クライアントがライセンスを所持している場合、フォントをテスト環境でも使用するためにはリファラー設定が重要です。具体的には、以下の手順を踏んでください。
- リファラー設定
フォントプロバイダーの管理画面で、テスト環境のドメインをリファラーとして登録します。これにより、テスト環境でもライセンスが認証され、フォントが正しく表示されるようになります。 - テスト環境の確認
リファラー設定を行った後、テスト環境でフォントが正しく表示されるか確認します。問題があれば、再度設定を見直しましょう。
Webフォントが表示されない他の原因と解決策
ドメイン移行やサーバー変更以外にも、Webフォントが表示されない原因はさまざまです。
以下、考えられるそのその他の原因とその解決策をまとめました。
(1) ライセンスや認証問題
有料Webフォントを使用している多くの場合は、ライセンス契約やAPIキー、認証が必要です。契約が切れたり、APIキーが無効化されている場合、フォントが表示されなくなります。
フォントプロバイダーの管理画面で、ライセンスやAPIキーが有効であることを確認しましょう。
また、必要に応じてクライアントが新たにライセンスを取得するよう促します。
(2) CSSのフォント指定ミス
CSSで指定したフォント名にスペルミスや誤った引用符があると、フォントが正しく表示されません。
CSSでフォントファミリーの名前が正しく書かれているか確認してください。
特に、大文字小文字の違いにも注意しましょう。例えば、font-family: 'MyFont'; と指定されている部分を再確認します。
(3) フォント読み込み方法の変更
フォントプロバイダー（Adobe FontsやGoogle Fontsなど）がAPIや読み込み方法を変更した場合、以前の設定ではうまく読み込めなくなることがあります。
フォントプロバイダーの公式サイトや管理画面で、読み込み方法に変更がないか確認します。
新しい設定が提供されている場合は、それに従ってCSSやスクリプトを更新しましょう。
(4) インターネット接続の問題やドメイン制限
Webフォントはオンラインで配信されることが多いため、ネット接続が不安定な場合や、指定されたドメイン以外からのアクセスが制限されている場合、表示ができないことがあります。
インターネット接続が問題ないか確認し、フォントプロバイダーの管理画面で利用するドメインが正しく設定されているかもチェックします。
特に、サブドメインやテストドメインも追加登録が必要です。
(5) ブラウザのキャッシュが原因
ブラウザのキャッシュによって古いCSSやスクリプトが読み込まれ、フォントが正しく反映されないことがあります。
ブラウザのキャッシュをクリアし、再度ページを読み込んでみてください。
特に開発中や設定変更後は、キャッシュが原因で意図通りに表示されないことが多いです。
(6) フォントファイルのパスが変更されている
フォントを自サーバーに直接アップロードして使用している場合、ファイルパスが変わると表示されません。
CSSのパス指定が正しいか確認し、サーバー移行やフォルダ変更後はフォントファイルの保存場所が変わっていないかもチェックしましょう。
クライアントと制作側の対策ポイント
制作側として、ドメイン移管・サーバー移行時にフォントトラブルを防ぐために以下のポイントを押さえておきましょう。
クライアントへのライセンス取得の促し
有料Webフォントが利用されている場合は、ライセンスがクライアント側で管理されているか確認し、未取得の場合は新たにライセンスを取得するよう提案します。
移行前にライセンスの所在を確認
過去の制作会社がライセンスを保持しているケースでは、クライアントと協力してライセンスの引き継ぎが可能か確認します。
連絡が取れない場合には、似たデザインの代替フォントを提案するなどして、デザイン崩れを防ぎます。
フォント設定情報の保管・共有
制作終了時には、フォントの設定情報やライセンス関連のドキュメントをクライアントに共有し、確実に保管してもらうように案内します。
これにより、移行時のトラブルが減少します。
このように、事前のライセンス確認や設定情報の保管が移行後のフォントトラブル回避に繋がります。
ブラウザやOSごとにフォントの見え方が違うときはこちらも参考にどうぞ
有料Webフォントが反映されない場合の代替策
有料Webフォントが表示されない・使えなくなった場合、似た無料フォントを使ってデザイン崩れを防ぐことも一つの選択肢です。
以下は無料Webフォントの取得と設定手順です。
Google Fontsで代替フォントを探す
Google Fontsには多くのスタイルが揃っており、特定のフォントに似たデザインのフォントも見つかります。
以下の手順を参考にしてください。
検索したフォントの右上に表示される「Get Font」をクリックします。
「Get embed code」をクリックして、コードを取得します。
Embed code in the <head> of your html「Copy code」クリックでコピーします。
コピーしたコードを<head></head>内に貼り付けます。
Noto Sans JP: CSS class for a variable style「Copy code」クリックでコピーします。
選択したフォントのコードをCSSに追加することで簡単に設定できます。必要に応じて編集してください。
文字の太さを変える場合、font-weight:〇〇;に入力します。今回は太さをすべて読み込んでいるため、（Thin）100〜（Black）900まで指定可能です。
/* Google Fontsを利用したCSS例 */
body {
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}代替フォントを使用することで、デザイン崩れを最小限に抑えつつ、トラブルに対応できるようにします。
直接記述されたWebフォントのローカル置換手順
Webフォント設定がコードに直打ちされている場合、ワードプレスなどで運用しているサイトではプラグインでの置換が難しいことがあります。
この場合は、ローカル環境にフォント設定しているファイルをダウンロード後、編集して一括置換する方法が有効です。
FTPなどでサーバーからファイルを取得し、編集可能な状態にします。
VSCodeやAtomなどのテキストエディタを使い、特定のフォント名を新しいフォント名に一括置換します。
- 例：「
font-family: 'OldFont', Arial, sans-serif;」から 「font-family: 'Noto Sans JP', sans-serif;」 に置換
編集後、テストサーバーにアップロードして動作確認を行い、フォントが反映されていることを確認します。
確認後、キャッシュをクリアした上で本番サーバーにアップロードします。
この方法により、手間を最小限にして正確なフォント置換が可能になります。
まとめ
クライアントからの移管や移行依頼に際し、有料Webフォントのライセンス問題は起こりがちです。
制作側としては、ライセンスの確認と適切な引き継ぎを行い、クライアントがスムーズにサイト運用を続けられるよう備えることが大切です。
ライセンス未取得やトラブル発生時には、代替フォントの利用やローカル編集で迅速に対応できるようにしておきましょう！
今後もWebに関するトラブルについてまた記事にしていきます。
それではまたお会いしましょう！