71573


いつもお世話になっております。

現在wordpressでwebページを作成しており、  
Lightiningの子テーマにて  
外観 > カスタマイズ > 追加CSSで下記のように追記し、WEBサイト全体のフォントを変えようとしているのですが  
見た目が変わりません。（このコード以外には何も追記していません。）

[code]

    *{
    font-family: 'Sawarabi Mincho', sans-serif;
    }
    
[/code]

スーパーリロードをおこなっても  
症状は変わらず、上記以外のフォントにしても見た目が変わりません。  
デベロッパーツール で見るとフォントの情報は以下の写真の通り  
変わっているのですが、肝心の見た目が変わりません。  
（このフォントですと明朝体になるはずですが。。）

これは何が原因でしょうか？

[![画像の説明をここに入力](https://i.stack.imgur.com/lt98W.png)](https://i.stack.imgur.com/lt98W.png)


CC BY-SA 4.0
2020-10-23T07:23:39.443
71453
2020-10-29T01:13:53.870
39719
question
wordpress font
WordpressにてLightiningの子テーマの追加CSSで追記したフォントが反映されない


フォントはOSにプリセットされているものを利用することが基本です。  
[Webアプリケーション](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88#Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E4%BD%BF%E7%94%A8)も例外ではありません。

Webサイトを作っていてたとえ自分なりのフォントを利用したいと思っても、ブラウザではテキストとして受け取ってフォントを適用しようとなったときにOS側にインストールされていないと利用することはできません。  
そのためもしフォントがない場合に備えて、[総称フォント](https://kw-note.com/website/font-family-
list/)と呼ばれるクライアントのOSで利用できる似たようなフォントが割り当てるものを記述します。例えばゴシックか明朝体のフォントを指定する`sans-
serif;`や`serif;`がそれにあたります。

[code]

    *{
       font-family: 'Sawarabi Mincho', sans-serif;
    }
    
[/code]

しかし昨今は[Webフォント](https://www.asobou.co.jp/blog/web/webfont#:%7E:text=Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF%E3%80%81%E3%81%82%E3%82%89%E3%81%8B%E3%81%98%E3%82%81,%E7%AD%96%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%9F%E6%8A%80%E8%A1%93%E3%81%A7%E3%81%99%E3%80%82)と呼ばれる技術を利用して、OSにフォントをインストールしなくてもフォントを利用できるようになっています。

これは画像や動画と同様にWebでフォントデータを配信して、ブラウザがフォントを解釈して置き換えてくれます。

OSにプリセットしなくてよい。  
ブラウザさえ対応していればどんなOSでも利用できるので統一できる。  
というメリットがあります。

ただし、  
Web経由になるのでフォントデータが大きくなるとちょっとサイトが重くなったり、  
キャッシュやネットワークの影響を受けやすくなるデメリットになります。  
またOS側は基本的にそのデバイスやUIに適したフォントを選択しているので、OSやフォントによっては多少のデザインの崩れだったり多少の見栄えの違いが発生する可能性があります。

デメリットメリットをよく判断して利用してみてください。


CC BY-SA 4.0
2020-10-29T01:13:53.870
71573
2020-10-29T01:13:53.870
22665
71453
answer