safariだけwebフォントが適用されない

実現したいこと(改変)

webフォントの表示を、
iphoneや、PCで見た時など、
どのブラウザでみても同じにしたい。

知人のiphoneで見た時に、表示が異なっていました。
（ブラウザは恐らく標準ブラウザのsafariだと思います）

発生している問題(改変)

画像の上に文字を重ねているのですが、
その文字がiosではフォントが正しく適用されません。

PCでもsafariでみるとやはりダメでした。

かなり初歩的な質問かと思いますが、よろしくお願いします。

##追記 (※コードのみ全文再掲載)
画像と文字、コードなど少し改変して、
載せています。（悩んでいること自体は同じです）

＜Chrome＞

＜Safari＞

＜index.htmlの記述全文＞

<!DOCTYPE html> <html Lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <meta name="viewport" content="width=device-width">

<!--************ noindex ************-->
<meta name=”robots” content=”noindex” />
<!--*********************************-->

<link rel="stylesheet" href="style.css">

</head> <body> <div class="c-wrap"> <p><img src="img/circle.png" alt=""></p> <p class="c-en">circleEN</p> <h2 class="c-jp">サークルJP</h2> </div> </body> </html>

＜style.cssの記述全文＞
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');

::before,::after,

{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

}

.c-wrap,.c-wrap p{
position:relative;
display: flex;
flex-direction: row;
justify-content: center;
width:100vw;
height:auto;
top:30px;
margin-bottom:200px;
}
.c-wrap img{
position:absolute;
z-index: -1;
width:130px;
height:auto;
opacity: 0.5;
}

p.c-en{
position: absolute;
font-size:50px;
font-family: 'Josefin Slab', serif;
top:10px;
text-shadow:3px 3px 4px white;
}

h2.c-jp{
position: absolute;
font-size:15px;
font-family: 'Noto Serif JP', serif;
top:110px;
text-shadow:1px 1px 1px white;
padding-right:5px;
font-weight: normal; /追加/
}

safariでも、
Chromeのフォントで表示させたいです。
となると、やはり画像としてしまうのが一番手軽なのかもと感じています。
ただ、容量や、今後大幅に改変することになると手間でしょうけど・・・

yoshinavi

2019/04/23 11:53

webフォントが適用されていない、との事ですか？開発ツール等での確認はどうですか？

yoshinavi

2019/04/23 17:40

どのように崩れてるのでしょうか？スクリーンショットと、症状が再現するコードを提示されると良いかと思います。

Miii

2019/04/24 05:25

画像と文字を変え、似たような症状がでるコードと画像を載せれるかやってみます！ありがとうございます！

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

回答2件

ベストアンサー

Google Fontsで指定されている方法で正しく読み込めば、
Safariでも正しく表示されるはずです。
それでもSafariだけ正しく読み込めないということであれば、
どこか他のところに原因がある可能性もあるかと思います。

HTML、CSSともにバリデーターにかけてエラーがないか確認し、エラーがあるようであれば修正した上で

　 Google Fontsの表示を再確認する

1でダメならまっさらなHTML・CSSを用意して、GoogleFontsの指定だけを試して正しく表示されるか確認する
2で正しく表示されるのであれば読み込み方法は正しいので、他の部分に問題があることはほぼ確定。

　あとは地道に少しずつ必要なCSSを足していってどこで表示されなくなるか確認し、問題のコードを調査する

といった感じで頑張って調べてみるしかないかもですね。

---ここから追記---
情報が追加されたので試してみました。iPhoneでは見てないのでSafariとChromeの比較になりますがご了承ください。

結論から言うと、私の環境（Mac）ではSafariでもChromeでも同じフォントで表示されます。

▼Chrome

▼Safari

CSSは以下のとおり。
/*追加*/とある行以外は掲載されているCSSママです。

CSS
1@import url('https://fonts.googleapis.com/css?family=Josefin+Slab|Noto+Serif+JP'); /*追加*/
2.c-wrap,.c-wrap p{
3position:relative;
4display: flex;
5flex-direction: row;
6justify-content: center;
7width:100vw;
8height:auto;
9top:30px;
10margin-bottom:200px;
11}
12.c-wrap img{
13position:absolute;
14z-index: -1;
15width:130px;
16height:auto;
17opacity: 0.5;
18}
19p.c-en{
20position: absolute;
21font-size:50px;
22font-family: 'Josefin Slab', serif;
23top:10px;
24text-shadow:3px 3px 4px white;
25}
26
27h2.c-jp{
28position: absolute;    
29font-size:15px;
30font-family: 'Noto Serif JP', serif;
31top:110px;
32text-shadow:1px 1px 1px white;
33padding-right:5px;
34font-weight: normal; /*追加*/
35}

IE11のようにGoogle Fonts自体がサポートを切ってしまった環境もあるので
Webフォントだからと言って全ての環境で表示されるとは限らないですが、
各デバイスにインストールされているフォント環境に依存せず、同じフォントを見せられるのが
Webフォントのウリなわけですから、フォントやサービス自体が非対応（orバグがある等）でもない限りは
正しく読み込めていれば違いはないはずです。

追加されたキャプチャを見る限り、環境依存とかデバイスごとの違いとかの以前に、
明らかにSafariだけ指定のWebフォントが読み込まれていない（適用できていない）です。
掲載されている情報以外に、絶対何か他の原因があるはずです。

---ここから更に追加---

Safariだけ適用されない原因（？）分かりました。

@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400i|Noto+Sans+JP|Noto+Serif+JP');

読み込んでいる欧文フォントが「イタリック体」なので、
Safariでは font-style: italic; の1行が必要だったようです。

CSS
1p.c-en{
2position: absolute;
3font-size:50px;
4font-family: 'Josefin Slab', serif;
5top:10px;
6text-shadow:3px 3px 4px white;
7font-style: italic; /*追加*/
8}

前回私の方でテストしたのが普通にSafariでも読み込めたのは、
読み込んでいるWebフォントがイタリック体ではないものだったからのようです。
イタリック体の書体を指定した際に、font-styleの指定を併記しなければ適用されないというのが
Safari独自の仕様ということなんでしょうね。

投稿2019/04/23 03:27

編集2019/04/24 15:25

aKusano

総合スコア3763

Miii

2019/04/24 05:20

今後にも活きる考え方を教えていただきありがとうございます！言葉足らずですみません。他回答者様の「同じフォントを使っていても、レンダリング結果は異なる」というのが当てはまるかもしれません。ありがとうございます！スクリーンショットとその問題のコードを載せれるかやってみます！

aKusano

2019/04/24 05:22

ちゃんと読み込みできてwebフォントを読み込んでいるのに、見え方が微妙に違うとかの場合は環境依存である可能性もありますね。どの程度の違いが出てるのかわからないのでなんとも言えませんが。ちなみにうちのMacのSafariとChromeを比較した限りは同じNotoSansJPで表示されてるように見えましたけどね。

Miii

2019/04/24 06:02

環境依存もあるのですね… NotoSansJPではいけるのですね。 Josefin Slab Noto Serif JP など使うフォントの種類により、ブラウザによって見え方が変わるとかあるのでしょうか？

Miii

2019/04/24 08:10

確かに、WEBフォントのウリなので、表示がちゃんとされないとおかしいですよね。おっしゃる通り、safariだけ読み込めていないのかと思います。バリデータにかけたり、最小単位でしてみたのですけど、やはりsafariのみ読み込みが正しくされません…。んー、なんでしょうね。 HTML全文とCSS全文を再掲載しますね。

aKusano

2019/04/24 08:11

まさかSafariだけオフラインで見てるなんてことないですよねw

Miii

2019/04/24 08:21

オフラインモードということですか？w そう言われると、どこか抜けてるからこうなってるのでしょうし、自信ないですが・・・w ただ、他のブラウザ同様、http:から始まるアドレス（サーバにアップ）してそこにアクセスしています。あと、キャッシュも消して試してみたりもしてみたり・・・

Miii

2019/04/24 08:24

追記：HTMLとCSSの全文再掲載いたしました。おそらく初歩的なことでミスってるのかと思います＞＜

aKusano

2019/04/24 15:27

原因わかったので回答に追加しましたー。これはなかなか気づきにくいですわ。。。Safari。。。