@importでフォントを使おうとしたらエラーが出て反映されない

環境

OS:Windows10 Home
エディタ：ATOM 1.48.0 x64

状況

@import でGooglefontのPoppinsを使おうとしたら、下図のようなエラーがでて実際のページに反応しません。
エラーの内容は調べたのですが、具体的な解決策が見つかりません。
なにかコードに書き間違いがあるのでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <link rel="stylesheet" href="style.css">
6    <title>webサイト制作テンプレート</title>
7  </head>
8  <body>
9    <div class="title">
10      <h1>Lorem ipsum</h1>
11    </div>
12    <ul>
13      <li>HOME</li>
14      <li>ABOUT</li>
15      <li>ACCESS</li>
16      <li>CONTACT</li>
17    </ul>
18  </body>
19</html>

CSS
1@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
2
3*{
4  margin: 0;
5  padding: 0;
6  box-sizing: border-box;
7  font-family: 'Poppins' sans-serif;
8}
9
10h1{
11  text-transform: uppercase;
12}
13.title{
14
15}

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

回答1件

ベストアンサー

font-familyでエラーになっているようですが、コンマが抜けています。

css
1font-family: 'Poppins', sans-serif;

font-family - CSS: カスケーディングスタイルシート | MDN

投稿2020/06/11 13:36

reosablo

総合スコア339

nanasino

2020/06/13 08:57

ご回答ありがとうございました。まさかこんな単純なミスだとは思いませんで考えが至りませんでした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

@importでフォントを使おうとしたらエラーが出て反映されない

環境

状況

関連した質問