Lancersで現役エンジニアに相談してみよう!

コーディングしたページをスマホで見たら、フォントが変わる時の対処法

頑張ってコーディングしたページを、スマホから直接URLを打ち込んで確認したら、なぜかフォントが変わってしまっていた…

↑↑この記事では、こんな疑問に答えます。

※【大前提】データ(HTML/CSSファイルなど)はサーバーにアップロード済みとします

結論:このコードをCSSにコピペしよう

body {
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'  
}

とりあえず、これをCSSに追記してみてください。

おそらく、フォントの表示に関する問題は解決するはずです。

WEBブラウザにおけるフォント表示の仕組み

それぞれのWEBブラウザは「独自のフォント設定」がデフォルトで備わっています。

そのため、CSSにあらかじめ自分でフォントを指定しないと、そのブラウザのデフォルトのフォントが表示されてしまうのです。

先述のCSSコードは「サルワカ」という超有名ブログで紹介されていたもので、人気・定番のフォントが指定されています。

参考 font-familyの書き方まとめ:CSSでフォント種類を指定しようサルワカ

自分でフォントを指定する際の注意点

クライアントからの指定やこだわりがなければ、さっきのCSSコードで問題ないですが、なんらかの理由で「自分でフォントを指定する必要がある人」向けに、注意点をまとめています↓↓

フォント指定CSSの書き方

【セレクタ】{
  font-family: フォントA;
}

なんとなく分かると思いますが、【セレクタ】に「body」や「p」などのフォントを指定したい箇所を書きます。

ほとんどの場合は一旦「body」で全体のフォントを指定してから、必要に応じて「p」や「h」タグで部分的に上書きします

複数のフォントを指定する

【セレクタ】{
  font-family: フォントA,フォントB,フォントC,フォントD,フォントE;
}

OSによって入っているフォントが異なります。例えば、Macにしか入っていないフォントを指定しても、WindowsではそのフォントでWEBページを読むことができません。

そのため、各OSが対応しているフォントを「それぞれ用意して」カバーさせるという方法が一般的に使われています。

フォント同士の間は「,」で区切ることを忘れないでください。

フォントの優先順位に気を付ける

フォントは前に書かれたものから優先的に表示されます。

上のコードを例にすると、「フォントA」が一番最初に表示されます。

ただし、例えばあなたがmacを使っていて、「フォントA」がmacに入っていないなら、次の「フォントB」を表示させようとするでしょう。

「フォントB」も入っていないなら、次の「フォントC」…という風に、前に書かれたフォントから優先的に表示させようとする仕組みになっています。

英語のフォントを使うなら、先に書く

【セレクタ】{
  font-family: フォントA(英語のみ),フォントB(英語のみ),フォントC(日本語+英語),
}

フォントには「英語のみ対応」「英語も日本語も対応」の2種類があります。

もし、アルファベット部分に特定の英語フォントを表示させたいなら、日本語フォントより前に記述する必要があります。

アルファベット部分も日本語フォントで表示させるなら、特に気にしなくて良いです。

半角スペースが入るフォントは「’」で囲む

【セレクタ】{
  font-family: 'font A',FONTB,フォントC,'ふぉんと D';
}

例えば「Avenir Next」みたいなフォントがありますが、この場合は

【セレクタ】{
  font-family: 'Avenir Next';
}

と記述する必要があります。

ちなみに「’」の代わりに「”」で囲んでも問題ないです。また、半角スペースが入らないフォント名を「’」「”」で囲んでも問題ありません。

最後に「sans-serif」か「serif」を入れる

【セレクタ】{
  font-family: フォントA,フォントB,フォントC,フォントD,フォントE, sans-serif ;
}

「sans-serif」や「serif」は”総称フォントファミリー”と呼ばれており、自分が指定したどのフォントもOSが対応していなかった場合に「じゃあせめてこんな感じのフォントで表示して」と指示するものです。

総称フォントファミリーには、ほかにも種類がありますが、現代においてほとんどのWEBサイトが「sans-serif」「serif」を使っており、さらにその中でも「sans-serif」のシェアが圧倒的に多いです。

ちなみに「sans-serif」はゴシック体系の総称フォントファミリーです。

【2020年】font-famiry(フォントファミリー)おすすめ5選