フォントが適用されない

テキストのコードを少しいじって、ブラウザ上で確認してみたのですが、フォントが適用されていません。googleで調べていろいろな解決方法を模索してみたのですが、どこが間違いなのか分かりません。
どこをどう直したらよいのでしょうか？ファイルパス等は間違っていないはずです。。

〈追記〉Windows環境，フォント以外のCSSは適用されている

HTML部分

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>あいさつ</title> <meta name="description" content="hiこんにちは">  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="css/styles.css" rel="stylesheet" > </head> <body> <h1>hellow</h1> <p>hellow</p> </body> </html>

CSS部分

@charset "UTF-8";

html {
font-size: 100%;
}

body{
font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro";
line-height:1.7;
color:#fffafa;
background-color: black;
}

h1{
font-weight:lighter;
}
p{
font-family:serif;
}

daisukei

2020/02/26 14:57

フォント以外のcssは読み込めている状態です。

kei344

2020/02/26 14:59

（質問文は編集できます）質問文のコード（HTML/CSS）はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

NEO_PLANETT-777

2020/02/27 00:04

ヒラギノってMac標準フォントだけど、Windowsは存在しないはず Mac環境ですか？

daisukei

2020/02/27 02:02

Windowsの環境です。ですが、ヒラギノ以外のフォントも使ってみた所、反映されていない様子です。

NEO_PLANETT-777

2020/02/27 04:44

CSSは外部ファイルですか？それともHTML内に記載？？外部なら、アドレス間違えてません？

NEO_PLANETT-777

2020/02/27 04:54 編集

ソースをコピって、HTML内に<style>タグでCSSを書き込んでみたらフォントをimpactにして表示してみたらなってますよ。外部ファイルのアドレス間違いでは？回答の方にソース載せときますね。

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

回答2件

問題の切り分けをした方が良いでしょう。

CSSが読み込めていない
CSSの記述ミス
フォントが存在しない
フォントの名前ミス

これらのどれかでしょう。
切り分けすると結構簡単に問題が見つかるので、まず最初に行うと良いかと思います。

投稿2020/02/26 14:55

kyoya0819

総合スコア10429

kyoya0819

2020/02/26 14:56

（PCのフォント変えても大差ないって思うのわたしだけ？

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

ベストアンサー

以下のようにHTMLにCSSを埋め込む方式では動いてます。
CSSファイルのアドレス間違えでは？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>あいさつ</title>
6		<meta name="description" content="hiこんにちは">
7		<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
8	</head>
9	<style>
10		html {
11			font-size: 100%;
12		}
13		
14		body {
15			font-family: "impact";
16			line-height:1.7;
17			color:#fffafa;
18			background-color: black;
19		}
20		
21		h1 {
22			font-weight:lighter;
23		}
24
25		p {
26			font-family:serif;
27		}
28	</style>
29	<body>
30		<h1>hellow</h1>
31		<p>hellow</p>
32	</body>
33</html>
34
35
36
37