グーグルフォントが思ったように指定されない原因

前提・実現したいこと

グーグルフォントのフォントファミリーの設定の仕方についての質問です。
解説動画もみて、同様の指定方法をしているはずなのにフォントファミリーが適用されません。
（全体的に欧文も和文も効いていないように思います。）

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <link rel="stylesheet" href="css/reset.css">
8 <link rel="stylesheet" href="css/style.css">
9 <link rel="stylesheet" href="css/responsive.css">
10
11
12
13 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">
14
15
16 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
17 <title>模写コーディング　中級</title>
18</head>
19
20<body>
21 <header>
22  <div class="fv">
23   <div class="header-wrapper">
24    <h1 class="header-left"><a href="#">Cresta Design</a></h1>
25    <nav class="header-nav">
26     <li><a class="header-item" href="#">Concept</a></li>
27     <li><a class="header-item" href="#">Service</a></li>
28     <li><a class="header-item" href="#">Works</a></li>
29     <li><a class="header-item" href="#">Contact</a></li>
30    </nav>
31   </div>
32  </div>
33 </header>
34 
35
36</html>
37

該当のソースコード

CSS
1@charset "UTF-8";
2html {
3  font-size: 62.5%;
4}
5html body {
6  line-height: 1.8;
7  /* font-family: 'Noto Serif', sans-serif, 'Noto Serif JP', sans-serif;*/
8  font-family: "Noto Serif", "Noto Serif JP", serif;
9  /*font-family: 'Noto Serif', 'Noto Serif JP', serif;*/
10  font-size: 1.6rem;
11  width: 100%;
12  /* font-weight: bold;*/
13  /*半透明のメッセージ部*/
14}

試したこと

解説動画を参照し、解説コードと見比べて違いを探す。もしくは切り貼りしてみる。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

参考サイト様

https://crestadesign.org/cording-traning/

目標物

グーグルフォント修正版追加後、フォントファミリー訂正後

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7
8 <link rel="preconnect" href="https://fonts.gstatic.com">
9 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Noto+Serif:wght@700&display=swap" rel="stylesheet">
10 <link rel="stylesheet" href="css/reset.css">
11 <link rel="stylesheet" href="css/style.css">
12 <link rel="stylesheet" href="css/responsive.css">
13 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
14 <title>模写コーディング　中級</title>
15</head>
16
17<body>
18 <header>
19  <div class="fv">
20   <div class="header-wrapper">
21    <h1 class="header-left"><a href="#">Cresta Design</a></h1>
22    <nav class="header-nav">
23     <li><a class="header-item" href="#">Concept</a></li>
24     <li><a class="header-item" href="#">Service</a></li>
25     <li><a class="header-item" href="#">Works</a></li>
26     <li><a class="header-item" href="#">Contact</a></li>
27    </nav>
28   </div>
29
30   <div class="main-copy-wrapper">
31    <p class="main-title">Design for Smile.</p>
32    <p class="main-text">快適なオフィスをデザインする</p>
33   </div>
34  </div>
35 </header>
36 <main>
37
38
39  <section id="concept">
40
41
42   <h2 class="section-title">CONCEPT
43
44   </h2>
45
46
47   <div class="wrapper">
48    <h3 class="sub-title">“働きたくなる空間”をデザインすることで 人々を幸せにする。</h3>
49    <div class="concept-item">
50     <p class="concept-text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させていただきます。</p>
51     <img class="concept-img" src="img/concept-image@2x.jpg" alt="オフィス">
52    </div>
53    <p class="message-right">Our Concept</p>
54   </div>
55  </section>
56
57  <section id="works">
58   <h2 class="section-title">Works</h2>
59   <div class="wrapper">
60    <ul class="works-list">
61     <li class="works-card">
62      <img class="works-img" src="img/card-img01@2x.jpg" alt="職場">
63      <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
64     </li>
65     <li class="works-card center">
66      <img class="works-img" src="img/card-img02@2x.jpg" alt="日の当たるデスク">
67      <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
68     </li>
69     <li class="works-card">
70      <img class="works-img" src="img/card-img03@2x.jpg" alt="解放空間">
71      <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
72     </li>
73    </ul>
74    <input class="btn" type="submit" value="View more">
75    <p class="message-left">Our Works</p>
76   </div>
77  </section>
78
79  <section id="service">
80
81   <h2 class="section-title">Service
82
83   </h2>
84
85   <div class="wrapper">
86    <h3 class="sub-title"></h3>
87    <ul class="service-list">
88     <li class="service-card"><img class="service-img" src="img/service-img01@2x.jpg" alt="計画">
89      <p class="service-text">Hearing</p>
90     </li>
91     <li class="service-card"><img class="service-img" src="img/service-img02@2x.jpg" alt="会議">
92      <p class="service-text">Planning</p>
93     </li>
94     <li class="service-card"><img class="service-img" src="img/sevice-img03@2x.jpg" alt="商談">
95      <p class="service-text">Direction</p>
96     </li>
97    </ul>
98    <p class="message-right">Our Service</p>
99   </div>
100  </section>
101
102  <section id="contact">
103   <h2 class="section-title">Contact
104   </h2>
105
106   <div class="wrapper">
107    <p>お気軽にご相談ください。</p>
108    <input class="btn" type="submit" value="Contact">
109   </div>
110   <p class="message-left">Contact us</p>
111  </section>
112 </main>
113 <footer><small>©︎cresta.design all rights reserved</small></footer>
114</body>
115
116</html>
117

CSS
1@charset "UTF-8";
2* {
3  box-sizing: border-box;
4}
5
6html {
7  font-size: 62.5%;
8}
9html body {
10  line-height: 1.8;
11 
12  font-family: "Noto Serif", "Noto Serif JP", serif;
13 
14  font-size: 1.6rem;
15  width: 100%;
16 
17}
18html body img {
19  max-width: 100%;
20  vertical-align: bottom;
21}
22html body a {
23  text-decoration: none;
24  color: #FFFFFF;
25}
26html body .btn {
27  background-color: yellow;
28  border-radius: 51px;
29  width: 235px;
30  height: 59px;
31  font-weight: bold;
32  margin: 80px;
33  border: none;
34}
35html body li {
36  list-style: none;
37}
38html body h2 {
39  font-size: 6rem;
40  margin-bottom: 73px;
41  font-weight: bold;
42  font-style: italic;
43}
44html body .section-title::after {
45  content: "";
46  display: inline-block;
47  background-color: #282F35;
48  width: 200px;
49  height: 5px;
50  margin-left: 30px;
51  vertical-align: middle;
52}
53html body .message-right {
54  font-size: 7rem;
55  color: #282F35;
56  text-align: right;
57  opacity: 0.1;
58  font-weight: bold;
59  letter-spacing: 4.5;
60  margin-top: 70px;
61}
62html body .message-left {
63  font-size: 7rem;
64  color: #FFFFFF;
65  text-align: left;
66  opacity: 0.1;
67  font-weight: bold;
68  margin-top: 70px;
69}
70html body h3 {
71  font-weight: bold;
72  font-size: 3rem;
73}
74html body section {
75  padding: 99px 10% 73px;
76}
77html body section .wrapper {
78  text-align: center;
79  margin: 0 auto;
80}
81html body header .fv {
82  background-image: url(../img/fv-bgi_01@2x.jpg);
83  background-position: center;
84  background-size: cover;
85  height: 100vh;
86  position: relative;
87}
88html body header .fv .header-wrapper,
89html body header .fv .main-copy-wrapper {
90  padding: 0 120px;
91}
92html body header .fv .header-wrapper {
93  display: flex;
94  justify-content: space-between;
95  padding: 19px 120px;
96}
97html body header .fv .header-wrapper .header-left {
98  font-size: 2.6rem;
99  color: #FFFFFF;
100}
101html body header .fv .header-wrapper .header-nav {
102  display: flex;
103}
104html body header .fv .header-wrapper .header-nav .header-item {
105  padding-right: 35px;
106}
107html body header .fv .main-copy-wrapper {
108  color: #FFFFFF;
109  position: absolute;
110  top: 60%;
111  text-align: center;
112}
113html body header .fv .main-copy-wrapper .main-title,
114html body header .fv .main-copy-wrapper .main-text {
115  font-weight: bold;
116}
117html body header .fv .main-copy-wrapper .main-title {
118  font-size: 7rem;
119}
120html body header .fv .main-copy-wrapper .main-text {
121  padding-bottom: 172px;
122  font-size: 3rem;
123  width: 478px;
124  height: 53px;
125}
126html body #concept .sub-title {
127  max-width: 600px;
128  text-align: center;
129}
130html body #concept .concept-item {
131  display: flex;
132  justify-content: center;
133  align-items: center;
134}
135html body #concept .concept-item .concept-text,
136html body #concept .concept-item .concept-img {
137  max-width: 440px;
138}
139html body #concept .concept-item .concept-text {
140  margin-right: 120px;
141}
142html body #works {
143  background-image: url(../img/works-bgi@2x.jpg);
144  background-position: center;
145  background-size: cover;
146}
147html body #works .section-title {
148  color: #FFFFFF;
149  text-align: right;
150}
151html body #works .section-title:after {
152  background-color: #FFFFFF;
153}
154html body #works .works-list {
155  justify-content: center;
156  align-items: center;
157  display: flex;
158  flex-wrap: wrap;
159}
160html body #works .works-list .works-card {
161  max-width: 320px;
162  box-shadow: 0px 0px 6px #000000;
163  background-color: #FFFFFF;
164  font-family: "Noto Serif JP", serif;
165  font-weight: normal;
166}
167html body #works .works-list .works-card .works-text {
168  padding: 25px 20px;
169}
170html body #works .works-list .center {
171  margin: 0 20px;
172}
173html body #service .service-list {
174  display: flex;
175}
176html body #service .service-list .service-card {
177  display: flex;
178  flex-direction: column;
179  position: relative;
180}
181html body #service .service-list .service-card .service-text {
182  color: #FFFFFF;
183  position: absolute;
184  top: 35%;
185  left: 30%;
186  font-size: 4rem;
187  font-weight: bold;
188}
189html body #contact {
190  color: #FFFFFF;
191  background-image: url(../img/contact-bgi@2x.jpg);
192  background-position: center;
193  background-size: cover;
194}
195html body #contact .section-title:after {
196  background-color: #FFFFFF;
197}
198html body #contact .section-title {
199  text-align: right;
200}
201html body footer {
202  text-align: center;
203  line-height: 78px;
204}