0

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

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

*{
font-family: 'Sawarabi Mincho', sans-serif;
}

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

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

画像の説明をここに入力

4
  • 1
    SawarabiってローカルPCにインストールされていますか?WEBフォントを利用すること可能ですか?
    – keitaro_so
    Commented 2020年10月23日 10:26
  • わかりました!フォントをMACにダウンロードする必要があったのですね。すいません、お騒がせしました。。ありがとうございます!
    – ligtning
    Commented 2020年10月23日 10:41
  • ただそれだとフォントをインストールした端末しか変わりません。webフォントを検討してください
    – keitaro_so
    Commented 2020年10月23日 10:49
  • ご助言ありがとうございます。勉強不足で申し訳ありません。いろいろ調べてみるとSawarabi MinchoはグーグルのWEBフォントらしいのですが、ローカルにインポートしないと使用できないのはなぜでしょうか? fonts.google.com/specimen/Sawarabi+Mincho?subset=japanese
    – ligtning
    Commented 2020年10月28日 9:24

1 件の回答 1

1

フォントはOSにプリセットされているものを利用することが基本です。
Webアプリケーションも例外ではありません。

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

*{
   font-family: 'Sawarabi Mincho', sans-serif;
}

しかし昨今はWebフォントと呼ばれる技術を利用して、OSにフォントをインストールしなくてもフォントを利用できるようになっています。

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

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

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

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

1
  • 懇切丁寧なご説明ありがとうございます。
    – ligtning
    Commented 2020年10月30日 23:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。