HTML 文字フォントがテキストと違いがある。

質問失礼いたします。
写真①「We'll Make Your Day」の部分ですが、テキストに沿って、Googleフォントより文字フォントを指定しているはずなのですが、フォントがテキスト通りになりません(写真２参照)

テキストには、このコードの記載がなされており、文字入力ミスがないかの確認はしています。
なにか目の付け所が間違っているのでしょうか？どうか、ご教授よろしくお願いいたします！

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WCB Cafe</title>
    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニック
    フードを提供するカフェ">

<!-- CSS -->
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link href="https://fonts.googleapis.com/css?family=Philosopher" href="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/favicon.png">
  </head>
<body>
  <div id="home" class="big-bg">
     <header class="page-header wrapper">
        <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
        <nav>
            <ul class="main-nav">
                <li><a href="news.html">News</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
     </header>

     <div class="home-content wrapper" >
         <h2 class="page-title">We'll Make Your Day</h2>
         <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
         <a class="button" href="menu.html">メニューを見る</a>
  　 </div><!---/.home-content-->
   </div><!--/#home -->
</body

```CSS
``````@charset "UTF-8";
html {
  font-size: 100%;
}
body {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
/*header
------------------------------------------------*/
.logo {
  width: 210px;
  margin-top: 14px;
}
.main-nav {
  display: flex;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 34px;
  list-style: none;
}
.main-nav li {
  margin-left: 36px;
}
.main-nav a {
  color: #432;
}
.page-header {
  display: flex;
  justify-content: space-between;
}
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

/* HOME
---------------------------------------------*/
.home-content{
  text-align: center;
  margin-top: 10%;
}
.home-content p {
  font-size: 1.125rem;
  margin: 10px 0 42px;
}

/*見出し*/
.page-title {
  font-size: 5rem;
  font-family: 'Philosopher' , serif;
  text-transform: uppercase;
  font-weight: normal;
}
/*ボタン*/
.button {
  font-size: 1.375rem;
  background: #0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
}
.button:hover {
  background: #0090aa;
}
/*大きな画像背景*/
.big-bg {
  background-size: cover;
  background-position: center top;
}
#home {
  background-image: url(../images/main-bg.jpg);
  min-height: 100vh
}
#home .page-title {
  text-transform: none;
}

hope_mucci

2021/06/05 12:22

CSSのコードブロックが崩れていますので修正してください。右側のプレビューもきちんと確認しましょう。

行動規範の内容に同意します

回答2件

ベストアンサー

html
1<link href="https://fonts.googleapis.com/css?family=Philosopher" href="stylesheet">

rel="stylesheet"がhref=stylesheet"になっています。

投稿2021/06/05 12:29

hope_mucci

総合スコア4447

ryota.0427

2021/06/05 12:53

hope_mucci様ご回答頂いたことが原因でした。おかげ様で、表示することができました。ありがとうございます。また、CSSの表示崩れのご指摘ありがとうございます。今後は気を付けます。

行動規範の内容に同意します

Philosopher - Google Fonts

によれば、

HTML
1<link rel="preconnect" href="https://fonts.gstatic.com">
2<link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap" rel="stylesheet">

となっていて、これで試したらちゃんと表示できました。

投稿2021/06/05 11:47

itagagaki

総合スコア8402

ryota.0427

2021/06/05 12:50

itagaki様いつも回答頂き大変恐縮です。ありがとうございます。何度も確認したつもりでしたが、rel="stylesheet"がhref="stylesheet"になっておりました。私のしょうもないミスです。 philosopher以降のコードを入力しても、表示されることを知りました。勉強になりました。また、今後ともよろしくお願いいたします。

行動規範の内容に同意します

あなたの回答