質問: いつもお世話になっております。 現在wordpressでwebページを作成しており、 Lightiningの子テーマにて 外観 > カスタマイズ > 追加CSSで下記のように追記し、WEBサイト全体のフォントを変えようとしているのですが 見た目が変わりません。(このコード以外には何も追記していません。) ``` *{ font-family: 'Sawarabi Mincho', sans-serif; } ``` スーパーリロードをおこなっても 症状は変わらず、上記以外のフォントにしても見た目が変わりません。 デベロッパーツール で見るとフォントの情報は以下の写真の通り 変わっているのですが、肝心の見た目が変わりません。 (このフォントですと明朝体になるはずですが。。) これは何が原因でしょうか? ![画像の説明をここに入力](https://i.stack.imgur.com/lt98W.png)
回答: フォントはOSにプリセットされているものを利用することが基本です。 Webアプリケーションも例外ではありません。 Webサイトを作っていてたとえ自分なりのフォントを利用したいと思っても、ブラウザではテキストとして受け取ってフォントを適用しようとなったときにOS側にインストールされていないと利用することはできません。 そのためもしフォントがない場合に備えて、総称フォントと呼ばれるクライアントのOSで利用できる似たようなフォントが割り当てるものを記述します。例えばゴシックか明朝体のフォントを指定する`sans-serif;`や`serif;`がそれにあたります。 ``` *{ font-family: 'Sawarabi Mincho', sans-serif; } ``` しかし昨今はWebフォントと呼ばれる技術を利用して、OSにフォントをインストールしなくてもフォントを利用できるようになっています。 これは画像や動画と同様にWebでフォントデータを配信して、ブラウザがフォントを解釈して置き換えてくれます。 OSにプリセットしなくてよい。 ブラウザさえ対応していればどんなOSでも利用できるので統一できる。 というメリットがあります。 ただし、 Web経由になるのでフォントデータが大きくなるとちょっとサイトが重くなったり、 キャッシュやネットワークの影響を受けやすくなるデメリットになります。 またOS側は基本的にそのデバイスやUIに適したフォントを選択しているので、OSやフォントによっては多少のデザインの崩れだったり多少の見栄えの違いが発生する可能性があります。 デメリットメリットをよく判断して利用してみてください。