web font (google fonts)が勝手に斜体になる...

ATOMでホームページを作っています。素人です。

web font(google fontsにもある) Josefin sans を使いたく以下のように組んだのですが、なぜか一部の太さ(weight)だけ斜体になってしまいます。

<!DOCTYPE HTML>
<html>
	<head>
		<title>test</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

	<style type="text/css">
	.test{
		font-family: 'Josefin Sans', sans-serif;
	}
	.test h1{
		font-weight: 700;
	}
	</style>

	</head>

  <body>
	  <div class="test">
	    <p>TEST</p>
    	<p>JosefinSansがなぜか斜体になる</p>
 		  <br />
	    <h1>weightによってはならない</h1>
	    <p>WHY why why</p>
			<h1>WHY why why</h1>
    </div>
	</body>
</html>

###試したこと
ヘッダーに
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet"> 
を書いても書かなくても同じでした。

特にitalic等font-styleは、いじってないのですが、、、
お詳しい方教えて下さい。

追記

ブラウザはFirefox、Chromeで確認しましたが、どちらも<p>の英語部分が斜体になります。<h1>はweight700にしているので斜体にはなりません。。。

![イメージ説明](219d3a3b2865eceb006ddfe498353a99.png)

すいません、、
開発者ツールを見てもわかりません。。。


追記

そもそも、
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet"> 
を書かなくても反映するってことありますか？
書かずとも斜体にはなりますが、ちゃんとjosefin sansになるのが不思議です。
どこかlocalからひっぱってきてしまっているのでしょうか？

kunai

2016/11/17 08:21

提示されたHTMLそのままで、斜体になりますか？コピってHTMLとして保存し、ブラウザ(Chrome)で確認しましたが、斜体にはなりませんでした。

manaty

2016/11/17 08:33

kunaiさま　早速のご回答ありがとうございます。東方こちらで質問はじめてで追記に重複してしまいますが、ブラウザはFirefox、Chromeで確認しましたが、どちらも<p>の英語部分が斜体になります。<h1>はweight700にしているので斜体にはなりません。。。わたしのPCがおかしいのでしょうか...

gin

2016/11/17 09:11

h1のfont-weightを700から400に変えると斜めになるんですか？

manaty

2016/11/17 09:15

ginさまありがとうございます。斜めになります。。。

kei344

2016/11/17 09:24

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

manaty

2016/11/17 09:32

すいません、、どことどこを囲めば良いかわかりません。。無知ですいません。

gin

2016/11/17 09:34

</html>の下にも「```」をつけてください。

gin

2016/11/17 10:03 編集

↑これ「どことどこを囲めば良いかわかりません」への回答ですよ。コード（この場合は<html>～</html>）をバッククォート3個で囲みます。<html>の上にはすでに3個あるので、</html>の下に同じように追加します。ちなみに最初の3個にhtmlと付けて「```html」とするとhtmlコードと分かるようになります。

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

回答3件

ベストアンサー

ChromeとFirefoxがあるのであれば、開発者ツールにてダレがその斜体CSSを設定しているか確認してください。
ページを開いた状態で、F12キーを押すと開発者ツールが出てきます。
Chromeの場合、開発者ツールの左上にカーソルが□を指しているようなアイコンが出ますが、それをクリックしてから、斜体になっているテキストをクリックしてください。
開発者ツールの右側に、その要素に与えられたCSS定義が表示されます。

投稿2016/11/17 08:40

kunai

総合スコア5405

kunai

2016/11/17 09:18

もしかしてローカルにインストールした「Josefin sans」があり、それがイタリックなのではないでしょうか。 Windowsであれば、C:\windows\fonts 以下にインストール済みのフォントがありますので、そこにJosefin Sansがないか見てみてください。もしあった場合は、問題なければ一度アンインストールすると良いのでは。

kunai

2016/11/17 09:20

途中送信してしまいました。私のPCにはJosefin Sansがインストールされていませんが、こちらでは<link>タグでフォントを指定した場合のみJosefin Sansが有効になりました。 linkタグを書かなかった場合、システムデフォルトのフォントで表示されます。

manaty

2016/11/17 10:13

kunaiさまやはりローカルにありました。 HD/ユーザ/＜ユーザ名＞/ライブラリ/Fonts でした。度々ご丁寧に教えて頂き、大変助かりました。またわからないことがありましたら、、是非ともよろしくお願い致します。ありがとうございました。

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

こちらで試してみた結果

ご覧のように斜体にはなりません。

html
1<!DOCTYPE HTML>
2<html>
3	<head>
4		<title>test</title>
5		<meta charset="utf-8" />
6		<meta name="viewport" content="width=device-width, initial-scale=1" />
7		<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
8
9		<style type="text/css">
10			.test{
11				font-family: 'Josefin Sans', sans-serif;
12			}
13			.test h1{
14				font-weight: 700;
15			}
16		</style>
17
18	</head>
19
20	<body>
21		<div class="test">
22			<p>TEST</p>
23			<p>JosefinSansがなぜか斜体になる</p>
24			<br />
25			<h1>weightによってはならない</h1>
26			<p>WHY why why</p>
27			<h1>WHY why why</h1>
28		</div>
29	</body>
30</html>