font-familyの反映について

Question

実現したいこと

読み込んだGooglefontのフォントスタイルを
一部をfont-familyを使って反映したいです。

前提

HTMLに基準となるフォントともう一種類、一部のデザインで使いたいフォントスタイルを記述しています。

  <!--Google font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!--Noto Serif JP　追加で利用したいフォントスタイル-->
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap" rel="stylesheet">

発生している問題・エラーメッセージ

エラーは出ていないのですが、ページを確認するとNoto Serif JPが反映されません。

.cover-title-first{
  font-size: 1.75rem;
  font-family: 'Noto Serif Japanese';
}

試したこと

フォント名の書き方を調べ、コピーペーストしても変わらなかったです。

Answer 1

font-family: 'Noto Serif Japanese' , serif ;
太字の部分を追加して解決することができました。

いえ、それは解決していないと思いますよ。
serif、つまりブラウザ標準の明朝体が適用されているだけであって、
Notoフォントがあたっているわけではありません。

下記指定でも同じフォントのはずです。

font-family: serif ;

正しくは下記指定です。

font-family: 'Noto Serif JP', serif;

誤：Noto Serif Japanese
正：Noto Serif JP

Comments

[nakamina]

ご指摘ありがとうございます。とても助かりました！

Answer 2

font-family: 'Noto Serif Japanese' , serif ;
太字の部分を追加して解決することができました。