Webフォント

端末に入っている書体しか出せない

font-family で指定できるのは、見ている人の端末に入っている書体だけです。だから同じサイトでも Windows と Mac で字の形が変わりますし、指定した書体が無ければ勝手に別の書体で表示されます。Web フォントは、書体そのものをネットから読み込ませるしくみです。誰が見ても同じ字で見せられます。

@import はファイルのいちばん上

Google Fonts が配っている書体は、CSS の1行で読み込めます。

この @import には、ファイルのいちばん上に書かなければならないという決まりがあります。上にコメントがあるのは問題ありませんが、スタイルのルールが1つでも先にあると、その @import はブラウザに丸ごと無視されます。書いたのに書体が変わらないときは、まずこの位置を疑ってください。

URL の中の wght@400;700 は読み込む太さの指定で、ここでは標準と太字の2つだけを読み込んでいます。太さを増やすほど読み込む量が増えて表示が遅くなるので、使う分だけにします。

body に当てれば全体に効く

読み込んだだけでは字は変わりません。font-family でその書体を使うと宣言します。body に書けば、中の見出しも段落も受け継ぎます。うしろに書く sans-serif は、読み込みに失敗したときの代わりです。

1. ファイルのいちばん上に Google Fonts の @import を1行書く
2. body に font-family を足し、読み込んだ書体を指定する
3. うしろに sans-serif も書いて、代わりの書体を用意する