ホームへ

【CSS】font-familyが効かない原因4つと解決方法

font-familyはフォント(書体)を変えることができるCSSです。

「指定したフォントになってない!font-familyが効いてないよ!?」

font-familyが効かない原因4つと解決方法を紹介します。

【原因1】フォントがインストールされていない

font-familyは基本的にその端末にインストールされているフォントを表示させます。

たとえばWinsowsでは当たり前に使われている「メイリオ」はMacやAndroidには標準インストールされていません。

それにも関わらずMacやAndroidに対してもメイリオを出せと言っても表示されません。

これは、ないものを出せといっている状態です。もちろん出せません。

【解決方法】Webフォントを使う

WebフォントはWebサーバーにあるフォントを端末にダウンロードさせて表示させます。

アップロードした画像を表示させるのと似た原理です。

Webフォントであれば、端末のフォントに依存しないためどの端末でも任意のフォントを表示させることができます。

一方でダウンロードが発生する分、文字の表示に時間がかかる場合があります。

できるだけフォントの容量を軽くする工夫をしましょう。

【原因2】フォント名を間違えている

font-familyに指定するフォント名は完全一致している必要があります。

たとえば「MS Pゴシック」の英字は半角ではなく全角です。

「MS Pゴシック」と半角で指定すると効きません。

【解決方法】コピペする

フォント名は手入力すると完全一致でなくなる場合があるためコピーペーストすることをおススメします。

【原因3】記号を間違えている

font-familyを指定するとき下記のようにいくつかの記号を使います。

body{font-family:'メイリオ','ヒラギノ角ゴ Pro W3','MS Pゴシック',sans-serif;}

半角英数のみのフォントであれば囲み入りませんが、全角を含むフォントの場合は「""」または「''」で囲う必要があります。

フォントの間には「,」をいれて区切ります。

この区切りを忘れていたり、最初のフォントの前、最後のフォントの後にあってもダメです。

またこの記号が全角になっていてもダメです。コピーペーストしたときに全角になることがあるので確認しましょう。

【解決方法】DevToolsで確認する

F12キーからDevToolsを起動できます。DevToolsはCSSの状況などを確認できます。

DevToolsで確認し、下記のように中線が引かれている場合、記号などの書き方を間違えている可能性が高いです。

ちなみにフォント名を間違えていたり、フォントがインストールされていないだけではこのように中線は引かれません。

根本的な解決ではなくても原因を特定できれば簡単に直すことができます。

【原因4】パスを間違えている

Webフォントを使っていてフォントが表示されないときはパスを間違えている可能性があります。

とくにダウンロードして相対パスにしたときは要注意です。

相対パスを指定するときは下記のように、CSSを指定している場所からフォントファイルへのパスを指定します。

@font-face {
  font-family: 'Noto Sans Japanese';
  src: url(../font/NotoSansJP-Medium.otf);
}
body{font-family: 'Noto Sans Japanese';}

style.cssに書いているならそのstyle.cssから、index.html内に直接書いているならそのindex.htmlからのパスとなります。

またフォントファイルの拡張子も忘れないように気を付けましょう。

【解決方法】絶対パスを使う

相対パスがどうしても理解できないのであれば絶対パスを使いましょう。

GoogleフォントであればGoogleのサーバー上にフォントがあるため、フォントデータをダウンロードしたりアップロードする必要もありません。

【その他の原因】ケアレスミス

スペルミスやCSSの優先順位のミスなどケアレスミスの可能性があります。

下記記事を参考に見直してみてください。

【まとめ】font-familyが効かない原因

【原因1】フォントがインストールされていない

【解決方法】Webフォントを使う

【原因2】フォント名を間違えている

  • 全角半角を含めて完全一致させる

【解決方法】コピペする

【原因3】記号を間違えている

  • 全角フォントは「""」か「''」で囲う
  • フォント間は「,」で区切る
  • 「,」は最初のフォントの前、最後のフォントの前に置かない
  • 記号は半角にする

【解決方法】DevToolsで確認する

【原因4】パスを間違えている

【解決方法】絶対パスを使う

以上、font-familyが効かない原因4つと解決方法でした。

マンガで読める関連記事